jquery 이미지 업로드시 미리보기

2년전 쯤 소스를 보다가 정리해야겠다싶어서 정리!

 

FileReader를 사용해서 서버에 접근하지않고 이미지 미리보기가 가능했다.

 

 

 //미리보기 시작-----------
   $("#upload_file").change(function(){
                //alert(this.value); //선택한 이미지 경로 표시
                readURL(this);
   });

   //미리보기 처리함수
   function readURL(input) {
       if (input.files && input.files[0]) {
           var reader = new FileReader(); //파일을 읽기 위한 FileReader객체 생성
           reader.onload = function (e) {
           //파일 읽어들이기를 성공했을때 호출되는 이벤트 핸들러
               //이미지 Tag의 SRC속성에 읽어들인 File내용을 지정 
               $('#previewPic').attr('src', e.target.result);
           }
           //File내용을 읽어 dataURL형식의 문자열로 저장 
           reader.readAsDataURL(input.files[0]);
       }
   }//readURL()--