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

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



The Blob or File from which to read.



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


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) {
  } 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.


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

Tarayıcı uyumluluğu

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.

Ayrıca bakınız

Document Tags and Contributors

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