[JavaScript] Image 미리보기

FileReader 객체

FileReader 객체는 웹 어플리케이션이 비동기적으로 데이터를 읽기 위해 읽을 파일을 가리키는 File 혹은 Blob 객체를 이용해 파일의 내용을 읽고 사용자의 컴퓨터에 저장하는 것을 가능하게 해준다.

File 객체는 <input> 태그를 이용하여 유저가 선택한 파일들의 결과로 반환된 FileList 객체, 드래그 앤 드랍으로 반환된 DataTransfer 객체 혹은 HTMLCanvasElement의 mozGetAsFile() API로부터 얻는다.

 

 

 

예시

FileReader를 이용하여 이미지 파일을 선택했을 시 이미지 미리보기를 만들어 보았다.

파일Input에 onchange 이벤트를 걸어, 파일을 선택하였을 시 이벤트가 일어나도록 하였다. 먼저 선택한 파일을 가져와서

파일이 이미지 타입이 아닐 경우 그냥 종료시킨다. 이미지 파일을 불러왔을 시, 해당 파일을 데이터 형식으로 읽고 전부 읽으면 onload 이벤트가 발생하여 reader객체의 result 프로퍼티로 파일 이미지가 뜨게 한다.

 

 

 

이미지를 선택하였을 시, 이미지가 뜬다.

 

 

 

 

이미지파일이 아닌 txt 파일을 선택하였을 시, 아무런 이미지가 뜨지 않는다.