현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.
readAsDataURL
메서드는 컨텐츠를 특정 Blob
이나 File
에서 읽어 오는 역할을 합니다. 읽어오는 read 행위가 종료되는 경우에, readyState
의 상태가 DONE
이 되며, loadend
이벤트가 트리거 됩니다. 이와 함께, base64 인코딩 된 스트링 데이터가 result
속성(attribute)에 담아지게 됩니다.
문법
instanceOfFileReader.readAsDataURL(blob);
파라미터
예제
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); } }
실행 결과
복수의 파일 읽기 예제
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.명세
명세 | 상태 | 비고 |
---|---|---|
File API The definition of 'FileReader' in that specification. |
Working Draft | Initial definition |
브라우저 호환성
Feature | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 3.6 (1.9.2)[1] | 7 | 10[2] | 12.02[3] | 6.0 |
Feature | Firefox Mobile (Gecko) | Android | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 32 | 3 | 10 | 11.5 | 6.0 |
[1] Prior to Gecko 2.0 beta 7 (Firefox 4.0 beta 7), all Blob
parameters below were File
parameters; this has since been updated to match the specification correctly. Prior to Gecko 13.0 (Firefox 13.0 / Thunderbird 13.0 / SeaMonkey 2.10) the FileReader.error
property returned a FileError
object. This interface has been removed and FileReader.error
is now returning the DOMError
object as defined in the latest FileAPI draft.
[2] IE9 has a File API Lab.
[3] Opera has partial support in 11.1.