input type file 다중 첨부파일 제이쿼리 질문이요. 채택완료
사진 등록
$(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);
});
}
});
});
화면상엔
#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;
답변에 대한 댓글 6개
<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]
댓글을 작성하려면 로그인이 필요합니다.
프라푸치노K하나하나 꼼꼼히 볼 시간은 없고 당장 보이는 부분만 말씀드립니다.
#ex_file 누르면 작동되는 소스인데 ID값이 다릅니다.
<input type="file" id="file" multiple="multiple" />
에서 아래형태로 변경해보세요.
<input type="file" id="ex_file" multiple="multiple" />
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
<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
이렇게뜹니다 ㅠㅠ 틀렸나요 ??