FileReader

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

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

생성자

FileReader()
Returns a newly constructed FileReader.

See Using files from web applications for details and examples.

속성

FileReader.error Read only
DOMError 파일을 읽는 도중에 발생한 에러를 나타냅니다.
FileReader.readyState Read only
FileReader의 상태를 나타내는 숫자입니다.

상태 값들

EMPTY : 0 : 아직 데이터가 로드 되지 않았음.
LOADING : 1 : 데이터가 로딩 중.
DONE : 2 : 모든 읽기 요청이 완료됨.
 
FileReader.result Read only
파일의 컨텐츠입니다. 이 속성은 읽기 작업이 완료되고 읽기 작업의 초기화에 사용한 방식으로 결정된 데이터의 포맷이 정해진 후에 유효합니다.

이벤트 핸들러

FileReader.onabort
abort 이벤트의 핸들러. 이 이벤트는 읽기 동작이 중단 될 때마다 발생합니다.
FileReader.onerror
error 이벤트의 핸들러. 이 이벤트는 읽기 동작에 에러가 생길 때마다 발생합니다.
FileReader.onload
load 이벤트의 핸들러. 이 이벤트는 읽기 동작이 성공적으로 완료 되었을 때마다 발생합니다.
FileReader.onloadstart
loadstart 이벤트 핸들러. 이 이벤트는 읽기 동작이 실행 될 때마다 발생합니다.
FileReader.onloadend
loadend 이벤트 핸들러. 이 이벤트는 읽기 동작이 끝났을 때마다 발생합니다. (읽기의 성공이나 실패 여부는 상관 않습니다.)
FileReader.onprogress
progress 이벤트 핸들러. 이 이벤트는 Blob 컨텐트를 읽는 동안 호출됩니다.

참고: FileReaderEventTarget 으로 부터 상속 받았습니다, 언급된 모든 이벤트들은 addEventListener 메소드를 사용하여 listen 하게 할 수 있습니다.

메서드

FileReader.abort()
읽기 요청을 중단시킵니다. 리턴이 되면 readyState 는 DONE이 됩니다.
FileReader.readAsArrayBuffer()
Starts reading the contents of the specified Blob, once finished, the result attribute contains an ArrayBuffer representing the file's data.
FileReader.readAsBinaryString()
Starts reading the contents of the specified Blob, once finished, the result attribute contains the raw binary data from the file as a string.
FileReader.readAsDataURL()
Starts reading the contents of the specified Blob, once finished, the result attribute contains a data: URL representing the file's data.
FileReader.readAsText()
Starts reading the contents of the specified Blob, once finished, the result attribute contains the contents of the file as a text string.

명세

Specification Status Comment
File API
The definition of 'FileReader' in that specification.
Working Draft Initial definition.

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
FileReaderChrome Full support 7Edge Full support YesFirefox Full support 3.6
Notes
Full support 3.6
Notes
Notes Prior to Firefox 4, Blob parameters were File parameters.
IE Full support 10Opera Full support 11Safari Full support 6WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 32Opera Android Full support 11Safari iOS Full support 6.1Samsung Internet Android ?
abortChrome Full support 7Edge Full support 12Firefox Full support 3.6IE Full support 10Opera Full support 11Safari Full support 6WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 32Opera Android Full support 11Safari iOS Full support 6.1Samsung Internet Android ?
abort eventChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
errorChrome Full support 7Edge Full support 12Firefox Full support 3.6
Notes
Full support 3.6
Notes
Notes Prior to Firefox 13, the error property returned a FileError object.
Notes From Firefox 13 to Firefox 58, the error property returned a DOMError object.
Notes From Firefox 58, the error property returns a DOMException object.
IE Full support 10
Notes
Full support 10
Notes
Notes The error property returns a DOMError object.
Opera Full support 11Safari Full support 6
Notes
Full support 6
Notes
Notes The error property returns a DOMError object.
WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 32
Notes
Full support 32
Notes
Notes From Firefox 32 to Firefox 58, the error property returned a DOMError object.
Notes From Firefox 58, the error property returns a DOMException object.
Opera Android Full support 11Safari iOS Full support 6.1
Notes
Full support 6.1
Notes
Notes The error property returns a DOMError object.
Samsung Internet Android ?
error eventChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
load eventChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
loadend eventChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
loadstart eventChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
onabortChrome Full support 7Edge Full support 12Firefox Full support 3.6IE Full support 10Opera Full support 11Safari Full support 6WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 32Opera Android Full support 11Safari iOS Full support 6.1Samsung Internet Android ?
onerrorChrome Full support 7Edge Full support 12Firefox Full support 3.6IE Full support 10Opera Full support 11Safari Full support 6WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 32Opera Android Full support 11Safari iOS Full support 6.1Samsung Internet Android ?
onloadChrome Full support 7Edge Full support 12Firefox Full support 3.6IE Full support 10Opera Full support 11Safari Full support 6WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 32Opera Android Full support 11Safari iOS Full support 6.1Samsung Internet Android ?
onloadendChrome Full support 7Edge Full support 12Firefox Full support 3.6IE Full support 10Opera Full support 11Safari Full support 6WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 32Opera Android Full support 11Safari iOS Full support 6.1Samsung Internet Android ?
onprogressChrome Full support 7Edge Full support 12Firefox Full support 3.6IE Full support 10Opera Full support 11Safari Full support 6WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 32Opera Android Full support 11Safari iOS Full support 6.1Samsung Internet Android ?
progress eventChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
readAsArrayBufferChrome Full support 7Edge Full support 12Firefox Full support 3.6IE Full support 10Opera Full support 12Safari Full support 6WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 32Opera Android Full support 12Safari iOS Full support 6.1Samsung Internet Android ?
readAsBinaryStringChrome Full support 7Edge Full support 12Firefox Full support 3.6IE No support NoOpera Full support 11Safari Full support 6WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 32Opera Android Full support 11Safari iOS Full support 6.1Samsung Internet Android ?
readAsDataURLChrome Full support 7Edge Full support 12Firefox Full support 3.6IE Full support 10Opera Full support 11Safari Full support 6WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 32
Notes
Full support 32
Notes
Notes Using the camera in Android 8.x raises an exception. See bug 1511083.
Opera Android Full support 11Safari iOS Full support 6.1Samsung Internet Android ?
readAsTextChrome Full support 7Edge Full support 12Firefox Full support 3.6IE Full support 10Opera Full support 11Safari Full support 6WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 32Opera Android Full support 11Safari iOS Full support 6.1Samsung Internet Android ?
readyStateChrome Full support 7Edge Full support 12Firefox Full support 3.6IE Full support 10Opera Full support 11Safari Full support 6WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 32Opera Android Full support 11Safari iOS Full support 6.1Samsung Internet Android ?
resultChrome Full support 7Edge Full support 12Firefox Full support 3.6IE Full support 10Opera Full support 11Safari Full support 6WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 32Opera Android Full support 11Safari iOS Full support 6.1Samsung Internet Android ?
Available in workersChrome Full support YesEdge Full support YesFirefox Full support 46IE No support NoOpera Full support 11Safari No support NoWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 46Opera Android Full support 11Safari iOS No support NoSamsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.

같이 보기