첨부된 이미지 미리 보기 - 서버에 올리지 않고.

https://developer.mozilla.org/ko/docs/Web/API/FileReader

상세 설명

http://www.javascripture.com/FileReader

실제 작동 확인

자바스크립트에서 window.FileReader라는 메소드를 사용하면 첨부된 파일을 읽어 올 수 있다.

아래 소스를 보면 input file에 첨부된 파일을 읽어서 img 태그에 보여 준다.

<input type='file' accept='image/*' onchange='openFile(event)'><br>

<img id='output'>

<script>

  var openFile = function(event) {

    var input = event.target;

    var reader = new FileReader();

    reader.onload = function(){

      var dataURL = reader.result;

      var output = document.getElementById('output');

      output.src = dataURL;

    };

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

  };

</script>

결과적으로 아래와 같은 이미지 태그가 생성된다.

파일 형식과 파일 내용(base64 문자열)을 이용해서 이미지를 표시한다.

<img id="output" src="data:image/jpeg;base64,/9j/4gIcSUNDX1BST0Z...Jk74igU1hL/CEJ+orn//2Q==">

만약 이미지가 아니라 pdf를 첨부하면 아래와 같이 파일 형식/내용을 이미지일 때와 동일한 양식으로 표시한다.

물론 엑박이 나온다. ㅋ

<img id="output" src="data:application/pdf;base64,JVBERi0xLjQKMSAwIG9iag...NTkKJSVFT0YK">

추가

IE는 10부터 지원한다고 합니다.

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

Feature	Firefox Mobile (Gecko)	Android	IE Mobile	Opera Mobile	Safari Mobile
Basic support	32	3	10	11.5	6.1