文件拖拽

var box = document.querySelector(".box");

//需要阻止的默认事件

//阻止浏览器将拖拽进来的元素，直接进行解析，将页面覆盖掉，

document.addEventListener("dragover",function(event){

        event.preventDefault();

})

//          X浏览器/影梭

//阻止drop的默认事件

document.addEventListener("drop",function(event){

       event.preventDefault();

})

//鼠标释放，文件的上传和读取

box.addEventListener("drop",function(event){

     //通过dataTransfer得到当前拖拽进来的文件列表

       var data = event.dataTransfer.files[0];

     //获取上传文件类型

        var type = data.type;

     //创建文件读取对象

      var fr = new FileReader();

      //作为URL读取文件

       fr.readAsDataURL(data);

        fr.addEventListener("load",function(){

               if(type.indexOf('image/') == 0){

                            //创建img

                              var img = document.createElement("img");

                              //改变路径

                                img.src = fr.result;

                                //添加子节点

                               box.appendChild(img);

                   }

                   else if(type.indexOf("video/") == 0){

                                 var video = document.createElement("video");

                                 video.src=fr.result;

                                 video.setAttribute("autoplay","autoplay");

                                box.appendChild(video);

                     }

           })

})