professional_javascript_for_web/ch25/FileAPIExample04.htm

<!DOCTYPE html>
<html>
<head>
    <title>File API Example</title>
    <script src="EventUtil.js"></script>
</head>
<body>
    <p>This page is a demonstration of the File API. This works in the latest versions of all major browsers, but you may need to place this file on a web server to get it to work.</p>
    <p>Select an image file below.</p>
    <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>