文件拖拽上传

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

　　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","demo!upload.action",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;
        }
    }

 　　拖拽上传的实现主要依赖ondragenter、ondragover、ondrop这三个事件，前后台数据的交互是在ondrop事件中来实现的ondragenter、ondragover这两个事件不执行我们主要的操作，但是也是必须的无论在哪个事件中我们都需要取消冒泡和组织默认行为。

　　ondrop事件处理函数中我们拖拽的文件对象是存在于事件对象event中的，我们可以使用e.dataTransfer.files方法来进行获取。

　　XMLHttpRequest对象和我们平时使用的ajax一样不做过多的解释。

　　FormData对象是XMLHttpRequest Level2 中添加的一个新的接口对象，我们可以利用该对象的append方法将我们的文件数据以键值对的方式附加到该对象上，然后通过XMLHttpRequest对象的send()方法，将数据发送到服务器端。

　　为了方便我们平时的使用我们可以在Element构造函数的原型上面自己扩展一个拖拽上传的接口方法。

    一个小demo