<!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>