input type file 다중 첨부파일 제이쿼리 질문이요.

input type file 다중 첨부파일 제이쿼리 질문이요.

QA

input type file 다중 첨부파일 제이쿼리 질문이요.

본문

 


<input type="file" id="file" multiple="multiple" />
<label for="file">사진 등록</label>
<div class="noImage_box">
    <img class="noImage noImage1" src="img/noimage.png" alt="이미지 없음" />
    <img class="noImage noImage2" src="img/noimage.png" alt="이미지 없음" />
    <img class="noImage noImage3" src="img/noimage.png" alt="이미지 없음" />
</div>
<script type="text/javascript">
$(function(){
    var sel_files = [];
    $(document).ready(function(){
        $("#ex_file").on("change",handleImgsFilesSelect);
        function handleImgsFilesSelect(e){
            var files = e.target.files;
            var filesArr = Array.prototype.slice.call(files);
            filesArr.forEach(function(f){
                if(!f.type.match("image.*")){
                    alert("확장자는 이미지 확장자만 가능합니다.");
                    return;
                }
                sel_files.push(f);
                var reader = new FileReader();
                reader.onload = function(e) {
                    document.querySelector('.noImage1').src = reader.result;
                }
                reader.readAsDataURL(f);
            });
        }
    });
});
</script>

 

화면상엔

               #ex_file
.noimage1 .noimage2 .noimage3

 

이렇게 되어있구요.

제가 스크립트를 소스를 긁어온거고, 구현을 못하겠네요...
사진등록버튼(#ex_file) 을 눌러 첨부를하면
1개 첨부시 - 첨부파일사진1 noimage2 noimage3
2개 첨부시 - 첨부파일사진1 첨부파일사진2 noimage3
3개 첨부시 - 첨부파일사진1 첨부파일사진2 첨부파일사진3
4개 첨부시 - X

 

이런식으로 하고싶은데 지금 구현되는건


1개첨부시 - 첨부파일사진1 noimage2 noimage3
2개첨부시 - 첨부파일사진2 noimage2 noimage3
3개첨부시 - 첨부파일사진3 noimage2 noimage3


이렇게 되고있어요 코드로 설명해주시면 감사하겠습니다 
 

이 질문에 댓글 쓰기 :

답변 2


document.querySelector('.noImage1').src = reader.result;

==>


var index = 0;
filesArr.forEach(function(f){
   index = index+1;
   ...
   document.querySelector('.noImage' + index).src = reader.result;


<script type="text/javascript">
$(function(){
    var sel_files = [];

    $(document).ready(function(){
        $("#ex_file").on("change",handleImgsFilesSelect);

        function handleImgsFilesSelect(e){
            var files = e.target.files;
            var filesArr = Array.prototype.slice.call(files);


            filesArr.forEach(function(f){
                var index = 0;
                index = index+1;
                if(!f.type.match("image.*")){
                    alert("확장자는 이미지 확장자만 가능합니다.");
                    return;
                }
                sel_files.push(f);

                var reader = new FileReader();
                reader.onload = function(e) {
                    document.querySelector('.noImage' + index).src = reader.result

                }
                reader.readAsDataURL(f);

            });
        }

    });
});
</script>


콘솔 오류도없는데.. 그대로 !
1개첨부시 - 첨부파일사진1 noimage2 noimage3
2개첨부시 - 첨부파일사진2 noimage2 noimage3
3개첨부시 - 첨부파일사진3 noimage2 noimage3
이렇게뜹니다 ㅠㅠ 틀렸나요 ??



<script type="text/javascript">
$(function(){
    var sel_files = [];

    $(document).ready(function(){
        $("#ex_file").on("change",handleImgsFilesSelect);

        function handleImgsFilesSelect(e){
            var files = e.target.files;
            var filesArr = Array.prototype.slice.call(files);
            var index = 0;    


            filesArr.forEach(function(f){
                index = index+1;
                if(!f.type.match("image.*")){
                    alert("확장자는 이미지 확장자만 가능합니다.");
                    return;
                }
                sel_files.push(f);

                var reader = new FileReader();
                reader.onload = function(e) {
                    document.querySelector('.noImage' + index).src = reader.result

                }
                reader.readAsDataURL(f);

            });
        }

    });
});
</script>

하나하나 꼼꼼히 볼 시간은 없고 당장 보이는 부분만 말씀드립니다.

 

#ex_file 누르면 작동되는 소스인데 ID값이 다릅니다.

<input type="file" id="file" multiple="multiple" />

에서 아래형태로 변경해보세요.

<input type="file" id="ex_file" multiple="multiple" />

 

 

답변을 작성하시기 전에 로그인 해주세요.
전체 123,118 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT