From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- files/ko/web/api/filereader/index.html | 111 +++++++++++++ .../ko/web/api/filereader/loadend_event/index.html | 165 ++++++++++++++++++++ .../ko/web/api/filereader/readasdataurl/index.html | 171 +++++++++++++++++++++ files/ko/web/api/filereader/readastext/index.html | 60 ++++++++ files/ko/web/api/filereader/result/index.html | 33 ++++ 5 files changed, 540 insertions(+) create mode 100644 files/ko/web/api/filereader/index.html create mode 100644 files/ko/web/api/filereader/loadend_event/index.html create mode 100644 files/ko/web/api/filereader/readasdataurl/index.html create mode 100644 files/ko/web/api/filereader/readastext/index.html create mode 100644 files/ko/web/api/filereader/result/index.html (limited to 'files/ko/web/api/filereader') diff --git a/files/ko/web/api/filereader/index.html b/files/ko/web/api/filereader/index.html new file mode 100644 index 0000000000..f444a189fa --- /dev/null +++ b/files/ko/web/api/filereader/index.html @@ -0,0 +1,111 @@ +--- +title: FileReader +slug: Web/API/FileReader +tags: + - API + - File API + - Files + - Interface + - Reference +translation_of: Web/API/FileReader +--- +
{{APIRef("File API")}}
+ +

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

+ +

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

+ +

생성자

+ +
+
{{domxref("FileReader.FileReader", "FileReader()")}}
+
Returns a newly constructed FileReader.
+
+ +

See Using files from web applications for details and examples.

+ +

속성

+ +
+
{{domxref("FileReader.error")}} {{readonlyinline}}
+
{{domxref("DOMError")}} 파일을 읽는 도중에 발생한 에러를 나타냅니다.
+
{{domxref("FileReader.readyState")}} {{readonlyinline}}
+
FileReader의 상태를 나타내는 숫자입니다.
+
+

상태 값들

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

이벤트 핸들러

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

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

+
+ + + +

메서드

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

명세

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('File API','#FileReader-interface','FileReader')}}{{Spec2('File API')}}Initial definition.
+ +

브라우저 호환성

+ +

{{Compat("api.FileReader")}}

+ +

같이 보기

+ + diff --git a/files/ko/web/api/filereader/loadend_event/index.html b/files/ko/web/api/filereader/loadend_event/index.html new file mode 100644 index 0000000000..c8e9f97664 --- /dev/null +++ b/files/ko/web/api/filereader/loadend_event/index.html @@ -0,0 +1,165 @@ +--- +title: 'FileReader: loadend event' +slug: Web/API/FileReader/loadend_event +translation_of: Web/API/FileReader/loadend_event +--- +
{{APIRef}}
+ +

loadend 이벤트는 성공여부와 관계없이 파일읽기가 끝나면 실행됩니다.

+ + + + + + + + + + + + + + + + + + + + +
버블링해당없음
이벤트 취소가능해당없음
인터페이스{{domxref("ProgressEvent")}}
이벤트 핸들러 프로퍼티{{domxref("FileReader.onloadend")}}
+ +

예제

+ +

Live example

+ +

HTML

+ +
<div class="example">
+
+    <div class="file-select">
+        <label for="avatar">Choose a profile picture:</label>
+        <input type="file"
+               id="avatar" name="avatar"
+               accept="image/png, image/jpeg">
+    </div>
+
+    <img src="" class="preview" height="200" alt="Image preview...">
+
+    <div class="event-log">
+        <label>Event log:</label>
+        <textarea readonly class="event-log-contents"></textarea>
+    </div>
+
+  </div>
+ + + +

JS

+ +
const fileInput = document.querySelector('input[type="file"]');
+const preview = document.querySelector('img.preview');
+const eventLog = document.querySelector('.event-log-contents');
+const reader = new FileReader();
+
+function handleEvent(event) {
+    eventLog.textContent = eventLog.textContent + `${event.type}: ${event.loaded} bytes transferred\n`;
+
+    if (event.type === "load") {
+        preview.src = reader.result;
+    }
+}
+
+function addListeners(reader) {
+    reader.addEventListener('loadstart', handleEvent);
+    reader.addEventListener('load', handleEvent);
+    reader.addEventListener('loadend', handleEvent);
+    reader.addEventListener('progress', handleEvent);
+    reader.addEventListener('error', handleEvent);
+    reader.addEventListener('abort', handleEvent);
+}
+
+function handleSelected(e) {
+    eventLog.textContent = '';
+    const selectedFile = fileInput.files[0];
+    if (selectedFile) {
+        addListeners(reader);
+        reader.readAsDataURL(selectedFile);
+    }
+}
+
+fileInput.addEventListener('change', handleSelected);
+
+ +

결과

+ +

{{ EmbedLiveSample('Live_example', '100%', '300px') }}

+ +

명세

+ + + + + + + + + + + + + + +
SpecificationStatus
{{SpecName('File API', '#dfn-loadend-event')}}{{Spec2('File API')}}
+ +

브라우저 호환성

+ + + +

{{Compat("api.FileReader.loadend_event")}}

+ +

See also

+ + diff --git a/files/ko/web/api/filereader/readasdataurl/index.html b/files/ko/web/api/filereader/readasdataurl/index.html new file mode 100644 index 0000000000..1533dc620d --- /dev/null +++ b/files/ko/web/api/filereader/readasdataurl/index.html @@ -0,0 +1,171 @@ +--- +title: FileReader.readAsDataURL() +slug: Web/API/FileReader/readAsDataURL +translation_of: Web/API/FileReader/readAsDataURL +--- +
{{APIRef("File API")}}
+ +

 

+ +

readAsDataURL 메서드는 컨텐츠를 특정 {{domxref("Blob")}} 이나 {{domxref("File")}}에서 읽어 오는 역할을 합니다. 읽어오는 read 행위가 종료되는 경우에, {{domxref("FileReader.readyState","readyState")}} 의 상태가 DONE이 되며,   {{event("loadend")}} 이벤트가 트리거 됩니다. 이와 함께,  base64 인코딩 된 스트링 데이터가 {{domxref("FileReader.result","result")}}  속성(attribute)에 담아지게 됩니다.

+ +

문법

+ +
instanceOfFileReader.readAsDataURL(blob);
+ +

파라미터

+ +
+
blob
+
읽고자 하는 {{domxref("Blob")}} 또는 {{domxref("File")}}.
+
+ +

예제

+ +

HTML

+ +
<input type="file" onchange="previewFile()"><br>
+<img src="" height="200" alt="이미지 미리보기...">
+ +

JavaScript

+ +
function previewFile() {
+  var preview = document.querySelector('img');
+  var file    = document.querySelector('input[type=file]').files[0];
+  var reader  = new FileReader();
+
+  reader.addEventListener("load", function () {
+    preview.src = reader.result;
+  }, false);
+
+  if (file) {
+    reader.readAsDataURL(file);
+  }
+}
+ +

실행 결과

+ +

{{EmbedLiveSample("Example", "100%", 240)}}

+ +

 

+ +

복수의 파일 읽기 예제

+ +

HTML

+ +
<input id="browse" type="file" onchange="previewFiles()" multiple>
+<div id="preview"></div>
+ +

JavaScript

+ +
function previewFiles() {
+
+  var preview = document.querySelector('#preview');
+  var files   = document.querySelector('input[type=file]').files;
+
+  function readAndPreview(file) {
+
+    // `file.name` 형태의 확장자 규칙에 주의하세요
+    if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) {
+      var reader = new FileReader();
+
+      reader.addEventListener("load", function () {
+        var image = new Image();
+        image.height = 100;
+        image.title = file.name;
+        image.src = this.result;
+        preview.appendChild( image );
+      }, false);
+
+      reader.readAsDataURL(file);
+    }
+
+  }
+
+  if (files) {
+    [].forEach.call(files, readAndPreview);
+  }
+
+}
+
+ +
주의: FileReader() 생성자는 Internet Explorer 10 이전 버전에서는 지원하지 않는 기능입니다. 정상적으로 지원하는 코드를 확인하기 위해서는 다음 링크를 참조하시기 바랍니다. crossbrowser possible solution for image preview. 또는 this more powerful example.
+ +

명세

+ + + + + + + + + + + + + + +
명세상태비고
{{SpecName("File API", "#FileReader-interface", "FileReader")}}{{Spec2("File API")}}Initial definition
+ +

브라우저 호환성

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop("1.9.2")}}[1]710[2]12.02[3]6.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Basic support3231011.56.0
+
+ +

[1] Prior to Gecko 2.0 beta 7 (Firefox 4.0 beta 7), all {{domxref("Blob")}} parameters below were {{domxref("File")}} parameters; this has since been updated to match the specification correctly. Prior to Gecko 13.0 {{geckoRelease("13.0")}} the FileReader.error property returned a {{domxref("FileError")}} object. This interface has been removed and FileReader.error is now returning the {{domxref("DOMError")}} object as defined in the latest FileAPI draft.

+ +

[2] IE9 has a File API Lab.

+ +

[3] Opera has partial support in 11.1.

+ +

바깥 고리

+ + diff --git a/files/ko/web/api/filereader/readastext/index.html b/files/ko/web/api/filereader/readastext/index.html new file mode 100644 index 0000000000..d0f5c80ddf --- /dev/null +++ b/files/ko/web/api/filereader/readastext/index.html @@ -0,0 +1,60 @@ +--- +title: FileReader.readAsText() +slug: Web/API/FileReader/readAsText +tags: + - 파일 + - 파일 API +translation_of: Web/API/FileReader/readAsText +--- +
{{APIRef("File API")}}
+ +

readAsText() 메서드는 지정된 {{domxref("Blob")}} 이나 {{domxref("File")}} 의 컨텐츠를 읽기 위해 사용합니다. 읽기  연산이 끝나면, {{domxref("FileReader.readyState","readyState")}} 가 DONE으로 바뀌고, {{event("loadend")}} 이벤트가 트리거 되고, {{domxref("FileReader.result","result")}} 프로퍼티는 파일의 내용을 텍스트 문자열로 가집니다.

+ +
+

새로운 API 사용가능
+ {{domxref("Blob.text()")}} 메서드는 파일을 텍스트로 읽는 프로미스 기반의 새 API 입니다.

+
+ +

문법

+ +
instanceOfFileReader.readAsText(blob[, encoding]);
+ +

매개변수

+ +
+
blob
+
읽어 들일 {{domxref("Blob")}} 이나 {{domxref("File")}}
+
encoding {{optional_inline}}
+
반환 데이터에 사용될 문자열 인코딩을 지정. 매개변수가 지정되지 않으면 기본적으로 UTF-8이라고 가정합니다.
+
+ +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("File API", "#readAsDataText", "readAsText()")}}{{Spec2("File API")}}Initial definition
+ +

브라우저 호환성

+ + + +

{{Compat("api.FileReader.readAsText")}}

+ +

함께 보기

+ + diff --git a/files/ko/web/api/filereader/result/index.html b/files/ko/web/api/filereader/result/index.html new file mode 100644 index 0000000000..feb9b02405 --- /dev/null +++ b/files/ko/web/api/filereader/result/index.html @@ -0,0 +1,33 @@ +--- +title: FileReader.result +slug: Web/API/FileReader/result +translation_of: Web/API/FileReader/result +--- +

{{APIRef("File API")}}

+ +

Summary

+ +

파일의 내용을 반환한다. 이 속성은 읽기가 완료 된 후에만 사용 가능 하며 데이터의 형식은 읽기 작업에 어떤 함수가 사용되었는가에 의해 정해진다.

+ +

Syntax

+ +
var file = instanceOfFileReader.result
+
+ +

Value

+ +

읽기 작업에 사용된 함수에 의해 string 또는 {{domxref("ArrayBuffer")}} 가 된다.

+ +

Specifications

+ +

{{page("/en-US/docs/Web/API/FileReader","Specifications")}}

+ +

Browser compatibility

+ +

{{page("/en-US/docs/Web/API/FileReader","Browser compatibility")}}

+ +

See also

+ + -- cgit v1.2.3-54-g00ecf