js拖拽文件夹上传

由于项目需要上传文件到服务器，于是便在文件上传的基础上增加了拖拽上传。拖拽上传当然属于文件上传的一部分，只不过在文件上传的基础上增加了拖拽的界面，主要在于前台的交互，

从拖拽的文件中获取文件列表然后调用上传方法即可。拖拽上传能给用户多一种选择，提高用户体验，下面是最简单的一个推拽上传示例

HTML部分：

<!--拖拽上传区域-->

<div class="dropBox_wrap">

    <div id="dropbox" class="drop">

         <h4>请将文件拖拽到此区域进行上传</h4>

    </div>

</div>

Js部分：

//监听拖拽放置区域拖拽事件

(function(){

var oDrop = document.getElementById("dropbox"),oBody = document.querySelector("body");

EventUtil.addHandler(oDrop,"dragenter",function(evt){

EventUtil.preventDefault(evt);

});

EventUtil.addHandler(oDrop,"dragover",function(evt){

$(oDrop).addClass("drop_enter").removeClass("drop_leave");

EventUtil.preventDefault(evt);

});

EventUtil.addHandler(oBody,"drop",function(evt){

$(oDrop).removeClass("drop_leave drop_enter");

EventUtil.preventDefault(evt);

return false;

});

EventUtil.addHandler(oDrop,"dragleave",function(evt){

$(oDrop).addClass("drop_leave").removeClass("drop_enter");

leaveHandler(evt);

});

EventUtil.addHandler(oDrop,"drop",function(evt){

dropHandler(evt);

});

})();

function dropHandler(e){

e.preventDefault(); //阻止默认

var fileList = e.dataTransfer.files; //获取拖拽的文件列表

if(fileList.length>0&&fileList[0].type != ""){//如果为多个文件，遍历

var formData = new FormData();

for(var i=0;i<fileList.length;i++){

formData.append('files', fileList[i]);//存入formData对象

}

ajaxFileUpload(formData); //调用文件上传方法,可以参考博客内另一篇文章：文件上传，下方会放链接

}else{

alert("请上传单个或多个文件");

}

}

//定义拖拽离开事件

function leaveHandler(e){

}

});

//定义事件处理程序方法

//element:dom对象，type:事件类型，handler:事件处理方法

var EventUtil = {

//添加事件监听方法

addHandler: function(element, type, handler){

if (element.addEventListener){

element.addEventListener(type, handler, false);

} else if (element.attachEvent){

element.attachEvent("on" + type, handler);

} else {

element["on" + type] = handler;

}

},

//移除事件监听方法

removeHandler: function(element, type, handler){

if (element.removeEventListener){

element.removeEventListener(type, handler, false);

} else if (element.detachEvent){

element.detachEvent("on" + type, handler);

} else {

element["on" + type] = null;

}

},

//获取事件对象

getEvent: function(event){

return event ? event : window.event;

},

getTarget: function(event){

return event.target || event.srcElement;

},

//阻止默认行为

preventDefault: function(event){

if (event.preventDefault){

event.preventDefault();

} else {

event.returnValue = false;

}

},

//阻止事件冒泡

stopPropagation: function(event){

if (event.stopPropagation){

event.stopPropagation();

} else {

event.cancelBubble = true;

}

}

}

文件上传方法可以参考我写的这篇文章：http://blog.ncmem.com/wordpress/2019/08/09/js%E6%8B%96%E6%8B%BD%E6%96%87%E4%BB%B6%E5%A4%B9%E4%B8%8A%E4%BC%A0/