professional_javascript_for_web/ch25/FileAPIExample05.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 with Drag and Drop. 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>
    <div id="droptarget" style="width: 500px; height: 200px; background: silver">
        Drop some files here
    </div>
    
    <script>
        window.onload = function(){
        
            var droptarget = document.getElementById("droptarget");
            
            function handleEvent(event){
                var info = "",
                    output = document.getElementById("output"),
                    files, i, len;            
            
                EventUtil.preventDefault(event);
                
                if (event.type == "drop"){
                    files = event.dataTransfer.files;
                    i = 0;
                    len = files.length;
                
                    while (i < len){
                        info += files[i].name + " (" + files[i].type + ", " + files[i].size + " bytes)<br>";
                        i++;
                    }
                    
                    output.innerHTML = info;
                }
            }

            EventUtil.addHandler(droptarget, "dragenter", handleEvent);
            EventUtil.addHandler(droptarget, "dragover", handleEvent);
            EventUtil.addHandler(droptarget, "drop", handleEvent);        

        };
        
    </script>
    <pre id="output"></pre>
</body>
</html>