professional_javascript_for_web/ch25/FileAPIExample03.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 a file below.</p>
    <input type="file" id="files-list">
    <script>
    
        function blobSlice(blob, startByte, length){
            if (blob.slice){
                return blob.slice(startByte, length);
            } else if (blob.webkitSlice){
                return blob.webkitSlice(startByte, length);
            } else if (blob.mozSlice){
                return blob.mozSlice(startByte, length);
            } 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(),
                    blob = blobSlice(files[0], 0, 32);

                if (blob){
                    reader.readAsText(blob);
                    
                    reader.onerror = function(){
                        output.innerHTML = "Could not read file, error code is " + reader.error.code;
                    };

                    reader.onload = function(){
                        output.innerHTML = reader.result;
                    };
                } else {
                    alert("Your browser doesn't support slice().");
                }
            });
        };
        
    </script>
    <pre id="output"></pre>
</body>
</html>