이미지 업로드 전 미리보기 방법을 알아 보도록 하겠습니다.
구현하려고 했던 기능은 사진을 클릭하면 프로필 사진이 바뀌는 것을 구현하려고 했습니다.
문제점:
1. <Input tag> type=file 에 Image 를 넣지 못하는 문제
2. 파일 load 시에 파일경로가 보안상의 이유로 fake path 로 표기되어 Image 를 보여줄 수 없는 문제
해결 :
1번
Input 태그를 2개 만들고 type=file 부분은 보이지 않게 처리 합니다.
Input 태그 type=image 부분을 클릭하면 type=file 부분이 열리도록 처리 하면 됩니다.
<body>
<input id="realfile" type="file" style="position:absolute;visibility:hidden;">
<input id="pictureId" type="image" onclick="document.getElementById('realfile').click()">
</body>
2번
File 의 value 값이 변경을 감지하는 jquery event 중 change 함수를 이용합니다.
그리고 readURL() 함수를 구현 하고 값을 type=image 에 넣어주면 완성
<script type="text/javascript">
$('#realfile').change(function () {
readURL(this);
});
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#pictureId').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
</script>
아래는 결과물입니다.
도움이 되셨다면 댓글 부탁드립니다 ^^.
참조: http://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded
'2019년 이전 정리 > JavaScript & Jqeury & Ajax & JSP' 카테고리의 다른 글
| JSP 어노테이션 (0) | 2014.01.04 |
|---|---|
| Jquery text 가져오기 (0) | 2013.12.11 |
| 로그인 성공시 메인페이지로 이동 (0) | 2013.12.02 |
| JQuery 페이지이동 파라미터 (0) | 2013.11.29 |
| 게시판 이전글 다음글 쿼리문 (0) | 2013.11.22 |
