첨부파일 미리보기를 만들고 있는데 2개중 하나의 이미지가 뜨지를 않습니다.
본문
<input type="file" name="bf_file[0]" id="bf_file_0" multiple>
<div class="image_holder">
<img class="img_thumb" id="image_holder0" style="width: 100%;">
</div>
<input type="file" name="bf_file[1]" id="bf_file_1" multiple>
<div class="image_holder">
<img class="img_thumb" id="image_holder1" style="width: 100%;">
</div>
<script>
var sel_file;
$(document).ready(function() {
$("#bf_file_0").on("change", handleImgFileSelect0);
$("#bf_file_1").on("change", handleImgFileSelect0);
});
function handleImgFileSelect0(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_file = f;
var reader = new FileReader();
reader.onload = function(e) {
$("#image_holder0").attr("src", e.target.result);
$("#image_holder1").attr("src", e.target.result);
console.log($("#image_holder0").attr("src", e.target.result));
console.log($("#image_holder1").attr("src", e.target.result));
}
reader.readAsDataURL(f);
$("#bf_file_0").val("");
$("#bf_file_1").val("");
});
}
</script>
갤러리 게시판에서 글작성시 첨부파일 이미지의 미리보기 기능을 만들고 있습니다. 검색을 통해서 어찌어찌 만들고 있는데 처음에는 hadleImgFileSelect0, hadleImgFileSelect1로 내용만 조금 바꿔서 각기 실행을 시키려고 했는데 찾아보니 fileReader가 두번 작동을 할 수가 없더라구요
그래서 결국 하나만 쓰기로 하고 분기를 주려고 하는데 어떤 식으로 줘야하는지 감이 안잡힙니다
어떻게 하면 미리보기 기능을 정상적으로 실행시킬수 있을까요?ㅠ
!-->답변 1
get_file 함수를 쓰셔서 해당 게시글의 첨부파일을 호출해올 수 있습니다.
$file = get_file($bo_table, $list[$i]['wr_id']);
첫번째 첨부파일
<img src="'.$file[0]['path'].'/'.$file[0]['file'].'" width="150" height="150">
두번째 첨부파일
<img src="'.$file[1]['path'].'/'.$file[1]['file'].'" width="150" height="150">
답변을 작성하시기 전에 로그인 해주세요.