文件拖拽上传

 一个简单的文件异步拖拽上传

DOM结构：

　　文件的拖拽上传我们只需要在HTML中写一个容器就可以可以根据我们额实际需求可以改成长的圆的方的~，结构如下：

<div id="demo"></div>

　　拖拽脚本实现：

　　拖拽的实现主要依赖三个事件和两个对象

　　三个事件：ondragenter、ondragover、ondrop

　　两个对象：FormData、XMLHttpRequest

　　直接在目标元素上绑定事件对象，进行一些逻辑处理，代码如下：

window.onload = function(){
        var demo = document.getElementById("demo");
        demo.addEventListener("dragenter",handler,false);
        demo.addEventListener("dragover",handler,false);
        demo.addEventListener("drop",upload,false);
        function upload(e){
            var e = e || window.event;
            handler(e);
            var files = e.dataTransfer.files;
            for(var i=0,il=files.length;i<il;i++){
                sendFile(files[i]);
            }
        }
        function sendFile(file){
            var xhr = null;
            if(window.XMLHttpRequest){
                xhr = new XMLHttpRequest();
            }else{
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            var fd = new FormData();
            fd.append("myFile",file);
            xhr.open("post","URL",true)
            xhr.send(fd)
            xhr.onreadystatechange = function(){
                if(xhr.readyState==4&&xhr.status==200){
                    alert(xhr.responseText)
                }
            }
        }
        function handler(e){
            var e = e || window.event;
            e.preventDefault ? e.preventDefault(): e.returnValue = false;
            e.stopPropagation ? e.stopPropagation(): e.cancelBubble = true;
        }
    }