테스트 사이트 - 개발 중인 베타 버전입니다

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

sjw77 3년 전 조회 1,820

</p>

<p><input type="file" name="bf_file[0]" id="bf_file_0" multiple></p>

<p><div class="image_holder"></p>

<p><img class="img_thumb" id="image_holder0" style="width: 100%;"></p>

<p></div></p>

<p><input type="file" name="bf_file[1]" id="bf_file_1" multiple></p>

<p><div class="image_holder"></p>

<p><img class="img_thumb" id="image_holder1" style="width: 100%;"></p>

<p></div></p>

<p> </p>

<p><script></p>

<p>                var sel_file;</p>

<p>                $(document).ready(function() {</p>

<p>                    $("#bf_file_0").on("change", handleImgFileSelect0);</p>

<p>                    $("#bf_file_1").on("change", handleImgFileSelect0);</p>

<p>                });</p>

<p> </p>

<p>                function handleImgFileSelect0(e) {</p>

<p>                    var files = e.target.files;</p>

<p>                    var filesArr = Array.prototype.slice.call(files);</p>

<p> </p>

<p>                    filesArr.forEach(function(f) {</p>

<p>                        if(!f.type.match("image.*")) {</p>

<p>                            alert("이미지 파일만 첨부해주세요.");</p>

<p>                            return;</p>

<p>                        }</p>

<p> </p>

<p>                        sel_file = f;</p>

<p>                        var reader = new FileReader();</p>

<p>                        reader.onload = function(e) {</p>

<p>                            $("#image_holder0").attr("src", e.target.result);</p>

<p>                            $("#image_holder1").attr("src", e.target.result);</p>

<p>                            console.log($("#image_holder0").attr("src", e.target.result));</p>

<p>                            console.log($("#image_holder1").attr("src", e.target.result));</p>

<p>                        }</p>

<p>                        reader.readAsDataURL(f);</p>

<p>                        $("#bf_file_0").val("");</p>

<p>                        $("#bf_file_1").val("");</p>

<p>                    });</p>

<p>                }</p>

<p>            </script></p>

<p>

 

갤러리 게시판에서 글작성시 첨부파일 이미지의 미리보기 기능을 만들고 있습니다. 검색을 통해서 어찌어찌 만들고 있는데 처음에는 hadleImgFileSelect0, hadleImgFileSelect1로 내용만 조금 바꿔서 각기 실행을 시키려고 했는데 찾아보니 fileReader가 두번 작동을 할 수가 없더라구요

 

그래서 결국 하나만 쓰기로 하고 분기를 주려고 하는데 어떤 식으로 줘야하는지 감이 안잡힙니다

어떻게 하면 미리보기 기능을 정상적으로 실행시킬수 있을까요?ㅠ

댓글을 작성하려면 로그인이 필요합니다.

답변 1개

채택된 답변
+20 포인트
하틴
3년 전

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">

로그인 후 평가할 수 있습니다

답변에 대한 댓글 4개

위너즈
2년 전
게시글에 첨부파일 미리보기를 본문에 삽입하는 방법을 찾다가 답글을 보게 되었습니다.
실례지만 위치가 어디인가요??
저는 아미나빌더를 사용하고 있습니다.
하틴
2년 전
어..저는 아미나빌더를 안써서 잘모르지만 위 답변대로 하셨을때 이미지가 안나오나요?
위너즈
2년 전
위 답변 대로 하고 싶어도...해당 폴더 위치를 몰라서요... 쌩초보입니다 ㅠㅠ
하틴
2년 전
음 리스트 스킨에서 써보시면 될 것 같습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인