FileReader.readAsDataURL()

Метод readAsDataURL используется для чтения содержимог указанного Blob или File.Когда операция закончится, readyState примет значение DONE, и будет вызвано событие loadend. В то же время, аттрибут result будет содержать данные как URL, представляющий файл, кодированый в base64 строку.

Синтаксис

instanceOfFileReader.readAsDataURL(blob);

Параметры

blob: Blob илиFile которые следует прочитать.

Пример

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

Совместимость с браузерами

BCD tables only load in the browser

Смотрите так же

FileReader