그누보드 QA - input type file 다중 첨부파일 제이쿼리 질문이요.

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

2020.02.25 11:48:59 3947 (222.♡.♡.73)

본문


<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

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

#input #type #file #다중 #첨부파일

답변 2

백수1995 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2020-02-25 12:24:19 121.♡.♡.49


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

==>


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

↳ obli 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2020-02-25 12:32:14222.♡.♡.73


<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
이렇게뜹니다 ㅠㅠ 틀렸나요 ??

↳ 백수1995 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2020-02-25 12:33:46121.♡.♡.49

var index = 0;
의 위치가 잘못됐어요

fileArr.forEach ~~ 보다 윗줄로 옮기세요 ^^

↳ obli 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2020-02-25 13:36:44222.♡.♡.73



<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>