문의좀 드리겠습니다.
아래와같이 첨부파일시 미리보기 이미지가 나오도록 해놨는데요
문제는 첫번째 첨부파일 이미지만 미리보기가 나오는데
전체 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>
Copy
$("#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개
채택된 답변
+20 포인트
이미지가 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 를 # -> . (아이디 -> 클래스) 로 변경 처리 하면 됩니다.
답변을 작성하려면 로그인이 필요합니다.