Метод 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 | Edge | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | 3.6 (1.9.2)[1] | 7 | (Yes) | 10 | 12.02[2] | 6.0 |
| Support in Web Workers | 46 (46) | (Yes) | (Yes) | No support | (Yes) | No support |
error property uses DOMException, not DOMError |
58 (58) | (Yes) | (Yes) | No support | (Yes) | No support |
| Feature | Firefox Mobile (Gecko) | Android | Edge | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Basic support | 32 | 3 | (Yes) | 10 | 11.5 | 6.1 |
| Support in Web Workers | 46.0 (46) | (Yes) | (Yes) | No support | (Yes) | No support |
error property uses DOMException, not DOMError |
58.0 (58) | ? | (Yes) | No support | (Yes) | No support |
[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] Opera has partial support in 11.1.