FileReader.readAsDataURL()
Метод readAsDataURL
используется для чтения содержимого указанного Blob
или File
.Когда операция закончится, readyState
(en-US) примет значение DONE
, и будет вызвано событие loadend (en-US)
. В то же время, атрибут result
(en-US) будет содержать данные как 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 |
---|
File API # APIASynch |
Совместимость с браузерами
BCD tables only load in the browser