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
이렇게뜹니다 ㅠㅠ 틀렸나요 ??
var index = 0;
의 위치가 잘못됐어요
fileArr.forEach ~~ 보다 윗줄로 옮기세요 ^^
<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>
그렇게 해서 안된다면 해당 함수 문제가 아니겠네요 ㅠ.ㅠ
추가적인 디버깅 아니면 힘들어 보입니다.
var index = 0; 를 var sel_files = []; 아래로 적었더니 됐어요 ㅋㅋㅋ 감사해요!!
으잉?
아.. 이해가 되네요..
제가 신경 못썼네요 ^^
해결 되셨다니 다행입니다.
하나하나 꼼꼼히 볼 시간은 없고 당장 보이는 부분만 말씀드립니다.
#ex_file 누르면 작동되는 소스인데 ID값이 다릅니다.
<input type="file" id="file" multiple="multiple" />
에서 아래형태로 변경해보세요.
<input type="file" id="ex_file" multiple="multiple" />
ㅠㅠ 저건 제가 급히 쓰느라 ... #ex_file 이 맞습니당
