This translation is incomplete. Please help translate this article from English.

The readAsDataURL method is used to read the contents of the specified Blob or File. When the read operation is finished, the readyState becomes DONE, and the loadend is triggered. At that time, the result attribute contains  the data as a URL representing the file's data as a base64 encoded string.

Söz dizimi

instanceOfFileReader.readAsDataURL(blob);

Parametreler

blob
The Blob or File from which to read.

Örnek

HTML

<input type="file" onchange="dosyaOnizle()"><br>
<img src="" height="200" alt="Resim önizlemesi...">

JavaScript

function dosyaOnizle() {
  var resim = document.querySelector('img');
  var dosyaSecici    = document.querySelector('input[type=file]').files[0];
  var dosyaOkuyucu  = new FileReader();

  dosyaOkuyucu.onloadend = function () {
    resim.src = dosyaOkuyucu.result;
  }

  if (dosyaSecici) {
    dosyaOkuyucu.readAsDataURL(dosyaSecici);
  } else {
    resim.src = "";
  }
}

Canlı Sonuç

Not: FileReader() nesnesi Internet Explorer 10 altındaki versiyonlarda desteklenmemektedir. Tam uyumlu kod için resim önizlemesi için çapraz platform çözümü'ne bakabilirsiniz. Ayrıca daha güçlü bir örnek çalışmaya da bakmayı unutmayın.

Özellikler

Specification Status Comment
File API
The definition of 'FileReader' in that specification.
Working Draft Initial definition

Tarayıcı uyumluluğu

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.

Ayrıca bakınız

Document Tags and Contributors

Contributors to this page: teoli, ozgrozer
Last updated by: teoli,