We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

Метод 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

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

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.

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

Метки документа и участники

Внесли вклад в эту страницу: teoli, HooFoo
Обновлялась последний раз: teoli,