첨부파일시 이미지 보이도록 부분 문의드립니다.
본문
문의좀 드리겠습니다.
아래와같이 첨부파일시 미리보기 이미지가 나오도록 해놨는데요
문제는 첫번째 첨부파일 이미지만 미리보기가 나오는데
전체 5개 첨부파일 올리는 건데 5개다 이미지 미리나오게 할려면 어떻게 해야할까요?
<div class="file_wr write_div">
<label for="bf_file_<?php echo $i+1 ?>" class="lb_icon"></label>
<input type="file" name="bf_file[]" title="파일용량 : <?php echo number_format($board['bo_upload_size']) ?> 바이트 이하만 가능" class="frm_file" id="fileUpload">
<div id="image-holder"></div>
</div>
$("#fileUpload").on('change', function () {
//Get count of selected files
var countFiles = $(this)[0].files.length;
var imgPath = $(this)[0].value;
var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
var image_holder = $("#image-holder");
image_holder.empty();
if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
if (typeof (FileReader) != "undefined") {
//loop for each file selected for uploaded.
for (var i = 0; i < countFiles; i++) {
var reader = new FileReader();
reader.onload = function (e) {
$("<img />", {
"src": e.target.result,
"class": "thumb-image"
}).appendTo(image_holder);
}
image_holder.show();
reader.readAsDataURL($(this)[0].files[i]);
}
} else {
alert("This browser does not support FileReader.");
}
} else {
alert("Pls select only images");
}
});
답변 1
이미지가 5개라 할때 위 jquery 가 특정 <img 의 src를 변경해라 라는 명령으로 보일경우
해당 부분에서 for 문으로 돌리고
<div id="image-holder"></div> 이 부분이 5개로
<div id="image-holder_1"></div>
<div id="image-holder_2"></div>
<div id="image-holder_3"></div>
<div id="image-holder_4"></div>
<div id="image-holder_5"></div>
로 수정 하시면 되며..만약 css 가 적용되어있을 경우 css 를 # -> . (아이디 -> 클래스) 로 변경 처리 하면 됩니다.