[HTML5] input type="file" 에서 이미지 첨부시 바로 보여주기 > 그누보드5 팁자료실

그누보드5 팁자료실

[HTML5] input type="file" 에서 이미지 첨부시 바로 보여주기 정보

[HTML5] input type="file" 에서 이미지 첨부시 바로 보여주기

본문

작업중에 구현했던 부분

바로 적용할 수 있도록 공유 합니다!

 

input type="file" 에 이미지 파일 첨부시 바로 보여주는 용도 입니다.

빨간색 표시된 id 부분만 상황에 맞게 변경하시면 됩니다.

 

아래 예시는 회원가입시 회원이미지 부분입니다.

게시판에서도 id만 맞춰주시면 쉽게 적용 가능합니다.

 

---------------------------------------------------

 

스크립트부분

<script type="text/javascript">

var sel_file;
$(document).ready(function() {
    $("#
reg_mb_img").on("change", handleImgFileSelect);
}); 

function handleImgFileSelect(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) {
            $("#img").attr("src", e.target.result);
        }
        reader.readAsDataURL(f);
    });
}

</script>

 

 

첨부된 이미지 출력부분

<div class="img_wrap">
    
<img id="img" />
</div>

 

 

파일첨부 input

<input type="file" id="reg_mb_img">

 

---------------------------------------------------

 

<img id="img" src="<?php echo $img ?>">

와 같이 파일경로가 미리 들어있을때도 잘 대체 합니다~

(이미지 수정시 미리 띄워놓기)

 

 

적용예시 (이뻐.. .)

 

237736610_1576775078.6498.png

추천
11
  • 복사

댓글 26개

우와
작년에도 펄스나인 팁 덕분에 야근에서 해방되었는데
올해는 펄스나인님 덕분에 주말있는 삶을 살수 있겠어요 ^^
너무 좋은 팁 감사드립니다
키핑해두었다가 다음번에 업데이트 할때 써봐야겠어요 너무 좋네요
안녕하세요 ^^ 도움이 되신다니 저도 좋네요~
올해는 작년보다 더~ 적게 일하시고 많이 버시길 기원합니다 ㅎㅎ
새해 복 많이 받으세요~
첨부파일이 한개가 아니라 여러개일때는 어떻게 해야 할까요?
마지막 이미지가 아닌 첨부된 파일 모두 미리보기를 하고 싶습니다.
안냥하세요. 질문 드립니다
1. id는 게시판 아이디인가요...?
2. 이미지를 첨부하기까진 빈공간인데, 빈 이미지?를 넣고 파일을 첨부할 때 바뀌게 할 수 있을까요?

ID는 input type="file" 의 id 입니다.
<div class="img_wrap"> 에 background-image 로 이미지를 미리 넣어놓으면 말씀하신대로 사용하실 수 있을것 같습니다~
죄송하지만 추가 질문 드려요.
<img id="img" src="<?php echo $img ?>">
이 부분이 글수정화면에서 적용이 안되는데, 뭐가 문제일까요?

<img id="img" src="<?php echo $bf_file_0 ?>">
<img id="img" src="<?php echo $view['file'][0]['view']?>">
여러가지로 바꿔봤는데, 표시가 안되네요
<?php echo $img ?> 이거는 그냥 예시로 넣어둔거라..
게시판에서 글을 수정할때 이미지를 불러오게 하시는거면 $write 로 시작해야 맞는것 같습니다~
글수정할때 첨부된 이미지파일이 있다면 경로를 출력하는 코드를 넣어주시면 되겠습니다.
$view는 글보기 페이지에서만 사용가능합니다!
© SIRSOFT
현재 페이지 제일 처음으로