drag file upload xhr 拖拽异步上传文件

<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) {
            output = document.getElementById("output"),
                    data, xhr,
                    files, i, len;
 
            event.preventDefault();
            if (event.type == "drop") {
                data = new FormData();
                files = event.dataTransfer.files;
                i = 0;
                len = files.length;
 
                while (i < len) {
                    data.append("file" + i, files[i]);
                    i++;
                }
 
                xhr = new XMLHttpRequest();
                xhr.open("post", "upload.php", true);
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4) {
                        console.log(+new Date() + "upload success");
//                            alert(xhr.responseText);
                    }
                };
                console.log(+new Date() + "upload start");
                xhr.send(data);
            }
        }
 
        droptarget.addEventListener('dragenter', handleEvent, false);
        droptarget.addEventListener('dragover', handleEvent, false);
        droptarget.addEventListener('drop', handleEvent, false);
    };
 
</script>
<pre id="output"></pre>

upload.php

$f = $_FILES['file0'];
var_dump($f);