From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- .../ko/web/api/filereader/readasdataurl/index.html | 171 +++++++++++++++++++++ 1 file changed, 171 insertions(+) create mode 100644 files/ko/web/api/filereader/readasdataurl/index.html (limited to 'files/ko/web/api/filereader/readasdataurl') 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.

+ +

바깥 고리

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