FileReader: readAsDataURL() method

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since июль 2015 г..

Learn more
See full compatibility

Примечание: Эта возможность доступна в Web Workers.

Метод readAsDataURL() интерфейса FileReader используется для чтения содержимого Blob или File. После завершения операции свойство readyState принимает значение DONE и возникает событие loadend. В то же время атрибут result будет содержать данные файла, закодированные в base64-строку в виде Data URL.

Примечание: Атрибут result не может быть напрямую декодирован как Base64 без предварительного удаления объявления Data URL, которое предшествует данным в кодировке base64. Чтобы получить только строку в кодировке base64, необходимо удалить data:*/*;base64, из результата.

Синтаксис

readAsDataURL(blob)

Параметры

blob: Blob или File для чтения.

HTML

html

<input type="file" onchange="previewFile()" /><br />
<img src="" height="200" alt="Предварительный просмотр изображения" />

JavaScript

function previewFile() {
 const preview = document.querySelector("img");
 const file = document.querySelector("input[type=file]").files[0];
 const reader = new FileReader();
 reader.addEventListener(
 "load",
 () => {
 // Конвертация изображения в base64-строку
 preview.src = reader.result;
 },
 false,
 );
 if (file) {
 reader.readAsDataURL(file);
 }
}

Результат

[フレーム]

Чтение нескольких файлов

HTML

html

<input id="browse" type="file" multiple />
<div id="preview"></div>

JavaScript

function previewFiles() {
 const preview = document.querySelector("#preview");
 const files = document.querySelector("input[type=file]").files;
 function readAndPreview(file) {
 // Проверяем, что `file.name` соответствует необходимым расширениям
 if (/\.(jpe?g|png|gif)$/i.test(file.name)) {
 const reader = new FileReader();
 reader.addEventListener(
 "load",
 () => {
 const image = new Image();
 image.height = 100;
 image.title = file.name;
 image.src = reader.result;
 preview.appendChild(image);
 },
 false,
 );
 reader.readAsDataURL(file);
 }
 }
 if (files) {
 Array.prototype.forEach.call(files, readAndPreview);
 }
}
const picker = document.querySelector("#browse");
picker.addEventListener("change", previewFiles);