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

obli

2020-02-25 (화) 11:48:59 5,027

Copy

<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개 / 댓글 7개

채택된 답변

+20 포인트

탈퇴회원

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2020-02-25 (화) 12:24:19

Copy

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

==>

Copy

var index = 0;

filesArr.forEach(function(f){

   index = index+1;

   ...

   document.querySelector('.noImage' + index).src = reader.result;

답변에 대한 댓글 6개

obli

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2020-02-25 (화) 12:32:14

[code]
<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>
[/code]

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

백수1995

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2020-02-25 (화) 12:33:46

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

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

obli

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2020-02-25 (화) 13:36:44

[code]

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

[/code]