File - Web API

File 인터페이스는 파일에 대한 정보를 제공하고, 웹 페이지의 JavaScript가 해당 내용에 접근할 수 있는 방법을 제공합니다.

File 객체는 보통 FileList 객체에서 가져올 수 있습니다. 그리고 FileList 객체는 사용자가 <input> 요소에서 파일을 선택했을 때, 드래그 앤 드롭 작업의 DataTransfer 객체에서, 그리고 HTMLCanvasElement의 mozGetAsFile() API에서 반환합니다.

File 객체는 특정 종류의 Blob이며, Blob을 사용할 수 있는 모든 맥락에서 사용할 수 있습니다. 특히 FileReader, URL.createObjectURL(), createImageBitmap(), XMLHttpRequest.send()는 Blob과 File을 모두 허용합니다.

자세한 정보 및 예제는 웹 애플리케이션에서 파일 사용하기를 참고하세요.

  <div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveAspectRatio="xMinYMin meet"><a xlink:href="https://developer.mozilla.org/ko/docs/Web/API/Blob" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="38.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Blob</text></a><polyline points="76,25  86,20  86,30  76,25" stroke="#D4DDE4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/ko/docs/Web/API/File" target="_top"><rect x="116" y="1" width="75" height="50" fill="#F4F7F8" stroke="#D4DDE4" stroke-width="2px" /><text  x="153.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">File</text></a></svg></div>

  a:hover text { fill: #0095DD; pointer-events: all;}

생성자

File(): 새로 생성한 File을 반환합니다.

속성

File.lastModified Read only: 파일의 최종 수정 시간을 UNIX 시간(1970년 1월 1일 자정)과의 밀리초 차이로 반환합니다.
File.lastModifiedDate Read only: File 객체가 참조하는 파일의 마지막 수정 시간을 Date로 반환합니다.
File.name Read only: File 객체가 참조하는 파일의 이름을 반환합니다.
File.webkitRelativePath Read only: File의 URL 상대경로를 반환합니다.

File이 Blob 을 구현하기 때문에 사용할 수 있는 속성도 있습니다.

File.size Read only: File의 크기를 바이트 단위로 반환합니다.
File.type Read only: File의 MIME 유형을 반환합니다.

메서드

File 인터페이스는 메서드를 정의하지 않지만, Blob 인터페이스에서 메서드를 상속합니다.

Blob.slice(): 소스 Blob에서 지정한 바이트 범위 만큼의 데이터를 포함하는, 새로운 Blob 객체를 반환합니다.
Blob.stream(): File을 ReadableStream으로 변환합니다. ReadableStream은 파일 내용을 읽을 때 사용할 수 있습니다.
Blob.text(): File을 스트림으로 변환한 후 끝까지 읽습니다. USVString으로 이행하는 Promise를 반환합니다.
Blob.arrayBuffer(): File을 스트림으로 변환한 후 끝까지 읽습니다. ArrayBuffer로 이행하는 Promise를 반환합니다.

명세

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

브라우저 호환성

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`File`	Chrome Full support 13	Edge Full support 12	Firefox Full support 7 Full support 7 No support 3 — 7 Notes Notes Non-standard implementation.	IE Full support 10	Opera Full support 11.5	Safari Full support 6	WebView Android Full support ≤37	Chrome Android Full support 18	Firefox Android Full support 7 Full support 7 No support 4 — 7 Notes Notes Non-standard implementation.	Opera Android Full support 11.5	Safari iOS Full support 6	Samsung Internet Android Full support 1.0
`File()` constructor	Chrome Full support 38	Edge Full support 79	Firefox Full support 28	IE No support No	Opera Full support 25	Safari Full support 10	WebView Android Full support 38	Chrome Android Full support 38	Firefox Android Full support 28	Opera Android Full support 25	Safari iOS Full support 10	Samsung Internet Android Full support 3.0
`lastModified`	Chrome Full support 13	Edge Full support 18	Firefox Full support 15	IE No support No	Opera Full support 16	Safari Full support 10	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android No support No	Opera Android No support No	Safari iOS Full support 10	Samsung Internet Android Full support Yes
`lastModifiedDate` DeprecatedNon-standard	Chrome Full support 13	Edge Full support 12	Firefox No support 15 — 61	IE Full support 10	Opera Full support 16	Safari No support No	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android No support No	Opera Android No support No	Safari iOS No support No	Samsung Internet Android Full support Yes
`name`	Chrome Full support 13	Edge Full support 12	Firefox Full support 3.6	IE Full support 10	Opera Full support 16	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 4	Opera Android No support No	Safari iOS Full support 8	Samsung Internet Android Full support Yes
`type`	Chrome Full support 13	Edge Full support 12	Firefox Full support 3.6	IE Full support 10	Opera Full support 16	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android No support No	Opera Android No support No	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
`webkitRelativePath`	Chrome Full support 13 Prefixed Full support 13 Prefixed Prefixed Implemented with the vendor prefix: webkit	Edge Full support 13	Firefox Full support 49	IE No support No	Opera No support No	Safari Full support 11.1	WebView Android Full support Yes	Chrome Android Full support 18 Prefixed Full support 18 Prefixed Prefixed Implemented with the vendor prefix: webkit	Firefox Android Full support 49	Opera Android No support No	Safari iOS Full support 11.3	Samsung Internet Android Full support 1.0 Prefixed Full support 1.0 Prefixed Prefixed Implemented with the vendor prefix: webkit

Legend

Full support: Full support
No support: No support
Non-standard. Expect poor cross-browser support.: Non-standard. Expect poor cross-browser support.
Deprecated. Not for use in new websites.: Deprecated. Not for use in new websites.
See implementation notes.: See implementation notes.
Requires a vendor prefix or different name for use.: Requires a vendor prefix or different name for use.

생성자

속성

메서드

명세

브라우저 호환성

Legend

같이 보기

웹 개발 배우기