<!DOCTYPE html> <html> <head> <title>File API Example</title> <script src="EventUtil.js"></script> </head> <body> <p>Select a file below.</p> <input type="file" id="files-list"> <script> window.onload = function () { var filesList = document.getElementById("files-list"); EventUtil.addHandler(filesList, "change", function (event) { var info = "", output = document.getElementById("output"), progress = document.getElementById("progress"), files = EventUtil.getTarget(event).files, type = "default", reader = new FileReader(); if (/image/.test(files[0].type)) { reader.readAsDataURL(files[0]); type = "image"; } else { reader.readAsText(files[0]); type = "text"; } reader.onerror = function () { output.innerHTML = "Could not read file, error code is " + reader.error.code; }; reader.onprogress = function (event) { if (event.lengthComputable) { progress.innerHTML = event.loaded + "/" + event.total; } }; reader.onload = function () { var html = ""; switch (type) { case "image": html = '<img src="' + reader.result + '" width="300px" height="300px">'; break; case "text": html = reader.result; break; } output.innerHTML = html; }; }); }; </script> <div id="progress"></div> <pre id="output"></pre> </body> </html>
<!DOCTYPE html> <html> <head> <title>File API Example</title> <script src="EventUtil.js"></script> </head> <body> <input type="file" id="files-list"> <script> function createObjectURL(blob){ if (window.URL){ return window.URL.createObjectURL(blob); } else if (window.webkitURL){ return window.webkitURL.createObjectURL(blob); } else { return null; } } window.onload = function(){ var filesList = document.getElementById("files-list"); EventUtil.addHandler(filesList, "change", function(event){ var info = "", output = document.getElementById("output"), progress = document.getElementById("progress"), files = EventUtil.getTarget(event).files, reader = new FileReader(), url = createObjectURL(files[0]); if (url){ if (/image/.test(files[0].type)){ output.innerHTML = "<img src="" + url + "">"; } else { output.innerHTML = "Not an image."; } } else { output.innerHTML = "Your browser doesn't support object URLs."; } }); }; </script> <pre id="output"></pre> </body> </html>