첨부파일 미리보기를 만들고 있는데 2개중 하나의 이미지가 뜨지를 않습니다.

첨부파일 미리보기를 만들고 있는데 2개중 하나의 이미지가 뜨지를 않습니다.

QA

첨부파일 미리보기를 만들고 있는데 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">

답변을 작성하시기 전에 로그인 해주세요.
전체 145
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT