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

매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!
input type file 다중 첨부파일 제이쿼리 질문이요.

QA

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

답변 2

본문

 


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

 

 

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 0
© SIRSOFT
현재 페이지 제일 처음으로