html5 javascript 이미지 미리보기

아래 [예제]에서 이미지 파일을 선택하시며 미리보기가 됩니다.

 

핵심은 FileReader 객체인데 지원 가능한 브라우저는 아래와 같습니다.

 

Firefox (Gecko)	Chrome	Internet Explorer*	Opera	Safari
3.6 (1.9.2)	7	10	12.02	6.0.2

[예제]

 

 

 

[코드]

 

function preview(input, target) {

    if(input.files && input.files[0]){

      var fileName= input.files[0].name;

      var ext=fileName.substr(fileName.length-3, fileName.length);

      var isCheck=false; 

          if(ext.toLowerCase()=='jpg' || ext.toLowerCase()=='gif' || ext.toLowerCase()=='png'){

          isCheck=true;               

      }

      if(isCheck==false){

          alert("이미지 파일 아님");

          jQuery(input).val("");

          return;

      }

      var reader = new FileReader();

      reader.readAsDataURL(input.files[0]);          

      reader.onload = function(e) {

        jQuery(target).attr('src', e.target.result);

      }

    }

}

 

 

https://prettycode.tistory.com