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

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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 7Edge Full support YesFirefox Full support 3.6
Notes
Full support 3.6
Notes
Notes Prior to Firefox 4, Blob parameters were File parameters.
IE Full support 10Opera Full support 11Safari Full support 6WebView Android ? Chrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 32Opera Android Full support 11Safari iOS Full support 6.1Samsung Internet Android ?
Available in workersChrome Full support YesEdge Full support YesFirefox Full support 46IE No support NoOpera Full support 11Safari No support NoWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 46Opera Android Full support 11Safari iOS No support NoSamsung Internet Android ?
abortChrome Full support 7Edge Full support YesFirefox Full support 3.6IE Full support 10Opera Full support 11Safari Full support 6WebView Android ? Chrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 32Opera Android Full support 11Safari iOS Full support 6.1Samsung Internet Android ?
errorChrome Full support 7Edge Full support YesFirefox Full support 3.6
Notes
Full support 3.6
Notes
Notes Prior to Firefox 13, the error property returned a FileError object.
Notes From Firefox 13 to Firefox 58, the error property returned a DOMError object.
Notes From Firefox 58, the error property returns a DOMException object.
IE Full support 10
Notes
Full support 10
Notes
Notes The error property returns a DOMError object.
Opera Full support 11Safari Full support 6
Notes
Full support 6
Notes
Notes The error property returns a DOMError object.
WebView Android ? Chrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 32
Notes
Full support 32
Notes
Notes From Firefox 32 to Firefox 58, the error property returned a DOMError object.
Notes From Firefox 58, the error property returns a DOMException object.
Opera Android Full support 11Safari iOS Full support 6.1
Notes
Full support 6.1
Notes
Notes The error property returns a DOMError object.
Samsung Internet Android ?
onabortChrome Full support 7Edge Full support YesFirefox Full support 3.6IE Full support 10Opera Full support 11Safari Full support 6WebView Android ? Chrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 32Opera Android Full support 11Safari iOS Full support 6.1Samsung Internet Android ?
onerrorChrome Full support 7Edge Full support YesFirefox Full support 3.6IE Full support 10Opera Full support 11Safari Full support 6WebView Android ? Chrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 32Opera Android Full support 11Safari iOS Full support 6.1Samsung Internet Android ?
onloadChrome Full support 7Edge Full support YesFirefox Full support 3.6IE Full support 10Opera Full support 11Safari Full support 6WebView Android ? Chrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 32Opera Android Full support 11Safari iOS Full support 6.1Samsung Internet Android ?
onloadendChrome Full support 7Edge Full support YesFirefox Full support 3.6IE Full support 10Opera Full support 11Safari Full support 6WebView Android ? Chrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 32Opera Android Full support 11Safari iOS Full support 6.1Samsung Internet Android ?
onprogressChrome Full support 7Edge Full support YesFirefox Full support 3.6IE Full support 10Opera Full support 11Safari Full support 6WebView Android ? Chrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 32Opera Android Full support 11Safari iOS Full support 6.1Samsung Internet Android ?
readyStateChrome Full support 7Edge Full support YesFirefox Full support 3.6IE Full support 10Opera Full support 11Safari Full support 6WebView Android ? Chrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 32Opera Android Full support 11Safari iOS Full support 6.1Samsung Internet Android ?
readAsArrayBufferChrome Full support 7Edge Full support YesFirefox Full support 3.6IE Full support 10Opera Full support 12Safari Full support 6WebView Android ? Chrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 32Opera Android Full support 12Safari iOS Full support 6.1Samsung Internet Android ?
readAsBinaryStringChrome Full support 7Edge Full support YesFirefox Full support 3.6IE Full support 10Opera Full support 11Safari Full support 6WebView Android ? Chrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 32Opera Android Full support 11Safari iOS Full support 6.1Samsung Internet Android ?
readAsDataURLChrome Full support 7Edge Full support YesFirefox Full support 3.6IE Full support 10Opera Full support 11Safari Full support 6WebView Android ? Chrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 32Opera Android Full support 11Safari iOS Full support 6.1Samsung Internet Android ?
readAsTextChrome Full support 7Edge Full support YesFirefox Full support 3.6IE Full support 10Opera Full support 11Safari Full support 6WebView Android ? Chrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 32Opera Android Full support 11Safari iOS Full support 6.1Samsung Internet Android ?
resultChrome Full support 7Edge Full support YesFirefox Full support 3.6IE Full support 10Opera Full support 11Safari Full support 6WebView Android ? Chrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 32Opera Android Full support 11Safari iOS Full support 6.1Samsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.

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

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

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