2013. 12. 24. 11:48

이미지 업로드 전 미리보기 방법을 알아 보도록 하겠습니다.

구현하려고 했던 기능은 사진을 클릭하면 프로필 사진이 바뀌는 것을 구현하려고 했습니다.


문제점:

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

Posted by hoonihoon