url_createobjecturl_file_img-manual.html

Enable keyboard shortcuts

<!DOCTYPE html>

<meta charset="utf-8">

<title>FileAPI Test: Creating Blob URL with File as image source</title>

<link rel="author" title="Intel" href="http://www.intel.com">

<link rel="author" title="JunChen Xia" href="mailto:xjconlyme@gmail.com">

<div>

  <p>Test steps:</p>

  <ol>

    <li>Download <a href="/images/blue96x96.png">blue96x96.png</a> to local.</li>

    <li>Select the local file (blue96x96.png) to run the test.</li>

  </ol>

  <p>Pass/fail criteria:</p>

  <p>Test passes if there is a filled blue square.</p>

  <p><input type="file" accept="image/*" id="fileChooser"></p>

  <p><img id="displayImage"></img></p>

</div>

<script>

  var fileInput = document.querySelector("#fileChooser");

  var img = document.querySelector("#displayImage");

  fileInput.addEventListener("change", function(evt) {

    img.src = window.URL.createObjectURL(fileInput.files[0]);

  }, false);

</script>