[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 ?>">
와 같이 파일경로가 미리 들어있을때도 잘 대체 합니다~
(이미지 수정시 미리 띄워놓기)
적용예시 (이뻐.. .)
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기
댓글 28개
새해 복 많이 받으셔요!
작년에도 펄스나인 팁 덕분에 야근에서 해방되었는데
올해는 펄스나인님 덕분에 주말있는 삶을 살수 있겠어요 ^^
너무 좋은 팁 감사드립니다
키핑해두었다가 다음번에 업데이트 할때 써봐야겠어요 너무 좋네요
올해는 작년보다 더~ 적게 일하시고 많이 버시길 기원합니다 ㅎㅎ
새해 복 많이 받으세요~
마지막 이미지가 아닌 첨부된 파일 모두 미리보기를 하고 싶습니다.
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']?>">
여러가지로 바꿔봤는데, 표시가 안되네요
게시판에서 글을 수정할때 이미지를 불러오게 하시는거면 $write 로 시작해야 맞는것 같습니다~
글수정할때 첨부된 이미지파일이 있다면 경로를 출력하는 코드를 넣어주시면 되겠습니다.
$view는 글보기 페이지에서만 사용가능합니다!
예를 들어 aaa 게시판에, 글쓰기에 적용을 하려면 빨간색부분을 혹시 어떻게 변경을 해야 할까요?