File.getAsDataURL

  • Revision slug: DOM/File.getAsDataURL
  • Revision title: File.getAsDataURL
  • Revision id: 128501
  • Created:
  • Creator: Crash
  • Is current revision? No
  • Comment URL now uppercase; 1 words added, 1 words removed; page display name changed to 'File.getAsDataURL'

Revision Content

Summary

Returns a DOMString containing a data: URL that encodes the entire contents of the referenced file.

Example

// fileInput is a HTMLInputElement: <input type="file" id="myfileinput" multiple>
var fileInput = document.getElementById("myfileinput");

// files is a FileList object (similar to NodeList)
var files = fileInput.files;

// array with acceptable file types
var accept = ["image/png"];

// img is a HTMLImgElement: <img id="myimg">
var img = document.getElementById("myimg");

// if we accept the first selected file type
if (accept.indexOf(files[0].mediaType) > -1) {
    // display the image
    // same as <img src="data:image/png,<imagedata>">
    img.src = files[0].getAsDataURL();
}

Revision Source

<h3 id="Summary">Summary</h3>
<p>Returns a <code>DOMString</code> containing a <a href="/en/data_URIs" title="en/data URIs"><code>data:</code></a> URL that encodes the entire contents of the referenced file.</p>
<h3 id="Example">Example</h3>
<pre class="eval">// fileInput is a HTMLInputElement: &lt;input type="file" id="myfileinput" multiple&gt;
var fileInput = document.getElementById("myfileinput");

// files is a FileList object (similar to NodeList)
var files = fileInput.files;

// array with acceptable file types
var accept = ["image/png"];

// img is a HTMLImgElement: &lt;img id="myimg"&gt;
var img = document.getElementById("myimg");

// if we accept the first selected file type
if (accept.indexOf(files[0].mediaType) &gt; -1) {
    // display the image
    // same as &lt;img src="data:image/png,&lt;imagedata&gt;"&gt;
    img.src = files[0].getAsDataURL();
}
</pre>
Revert to this revision