html 상의 input:file에서 선택한 이미지 파일을 서버에 업로드하지 않고 미리보기하는 방법은 크게 2가지임.

하나는 FileReader를 이용하는 방법이고, 하나는 IE 전용 filter를 이용하는 방법.


FileReader의 경우 왠만한 최신 브라우저는 다 지원함.

http://caniuse.com/#feat=filereader <- 지원하는 브라우저는 여기서 확인가능.


IE의 경우 IE10부터 FileReader가 있고 그 하위버전은 filter를 이용해야 함.


개인적으로 로컬 이미지 파일 미리보기를 테스트해서 성공한 브라우저는 다음과 같음.

Chrome 37.0.2062.124 

FireFox 32.0.3

Opera 24.0.1558.64

IE11 (10,9,8,7은 에뮬레이션 모드로 테스트)

아이폰 Safari 


Safari5 의 경우 FileReader도 없고 filter도 없어서 미리보기가 불가능했음. (Safari6 부터는 FileReader 있음)


아래는 jQuery용으로 만든 로컬 이미지 미리보기.

소스만 긁어서 바로 테스트할 수 있도록 html 파일 전체 소스를 올림.











Posted by bloodguy

댓글을 달아 주세요

  1. Looper 2015.02.13 15:40  댓글주소  수정/삭제  댓글쓰기

    감사합니다. 이 기능이 필요했는데 많은 도움 되었습니다.^^

  2. 나그네 2015.07.02 11:53  댓글주소  수정/삭제  댓글쓰기

    파일 한개씩은 되는데 class로 여러개 있는 경우는 어찌해야 할까요?

    • bloodguy 2015.07.02 19:18 신고  댓글주소  수정/삭제

      죄송합니다만 질문을 정확하게 이해를 못하겠습니다.
      혹시 input.file 여러개를 어떻게 하냐고 물으신다면 jquery selector와 반복문, 배열에 대해 말씀드려야 할 것 같은데요...;;