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);

 

转载于:https://www.cnblogs.com/human/p/3469844.html