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

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

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support7 Yes3.6110116
Available in workers Yes Yes46 No11 No
abort7 Yes3.610116
error7 Yes3.62 3 41061166
onabort7 Yes3.610116
onerror7 Yes3.610116
onload7 Yes3.610116
onloadend7 Yes3.610116
onprogress7 Yes3.610116
readyState7 Yes3.610116
readAsArrayBuffer7 Yes3.610126
readAsBinaryString7 Yes3.610116
readAsDataURL7 Yes3.610116
readAsText7 Yes3.610116
result7 Yes3.610116
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support ? Yes Yes32116.1 ?
Available in workers Yes Yes Yes4611 No ?
abort ? Yes Yes32116.1 ?
error ? Yes Yes324 5116.16 ?
onabort ? Yes Yes32116.1 ?
onerror ? Yes Yes32116.1 ?
onload ? Yes Yes32116.1 ?
onloadend ? Yes Yes32116.1 ?
onprogress ? Yes Yes32116.1 ?
readyState ? Yes Yes32116.1 ?
readAsArrayBuffer ? Yes Yes32126.1 ?
readAsBinaryString ? Yes Yes32116.1 ?
readAsDataURL ? Yes Yes32116.1 ?
readAsText ? Yes Yes32116.1 ?
result ? Yes Yes32116.1 ?

1. Prior to Firefox 4, Blob parameters were File parameters.

2. Prior to Firefox 13, the error property returned a FileError object.

3. From Firefox 13 to Firefox 58, the error property returned a DOMError object.

4. From Firefox 58, the error property returns a DOMException object.

5. From Firefox 32 to Firefox 58, the error property returned a DOMError object.

6. The error property returns a DOMError object.

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

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

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