Эта статья нуждается в редакционном обзоре. Как вы можете помочь.
Метод readAsDataURL
используется для чтения содержимог указанного Blob
или File
.Когда операция закончится, readyState
примет значение DONE
, и будет вызвано событие loadend
. В то же время, аттрибут result
будет содержать данные как URL, представляющий файл, кодированый в
base64 строку.
Синтаксис
instanceOfFileReader.readAsDataURL(blob);
Параметры
Пример
HTML
<input type="file" onchange="previewFile()"><br> <img src="" height="200" alt="Image preview...">
JavaScript
function previewFile() { var preview = document.querySelector('img'); var file = document.querySelector('input[type=file]').files[0]; var reader = new FileReader(); reader.onloadend = function () { preview.src = reader.result; } if (file) { reader.readAsDataURL(file); } else { preview.src = ""; } }
Результат
FileReader()
конструктор не поддерживается Internet Explorer до 10 версии. Для полностью совместимого решения прочтите crossbrowser possible solution for image preview. Смотрите так же this more powerful example.Спецификации
Specification | Status | Comment |
---|---|---|
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.2 |
Feature | Firefox Mobile (Gecko) | Android | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 32 | 3 | 10 | 11.5 | 6.1 |
[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.