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/
最新文章
- CentOS 7.1, 7.2 下安装dotnet core
- Linux 底下使用C语言的 单链表 ，双链表，二叉树 读取文件，并排序
- 网络爬虫之Windows环境Heritrix3.0配置指南
- JQuery 获取指定url对应的html内容
- 比较优势 - MBA智库百科
- UVA10382-Watering Grass-贪心 NYOJ6-喷水装置（一）-贪心
- 0基础一分钟入门Python
- java之SpringMVC的controller配置总结
- NodeJs 学习笔记（一）Wedding 项目搭建
- Codeforces 955F Heaps - 动态规划
- SharePoint REST API - 使用REST接口对列表设置自定义权限
- leetcode198
- 探讨PHP页面跳转几种实现技巧 转自# 作者：佚名 来源：百度博客 #
- 【代码审计】XYHCMS V3.5任意文件下载漏洞分析
- FFMPEG结构体分析：AVFrame(解码后的数据)
- win下apache的error.log和access.log文件过大
- Python小白学习之路（九）—【字符串格式化】【百分号方式】【format方式】
- 【动软.Net代码生成器】连接MySQL生成C#的POCO实体类（Model）
- 快速入门react
- 选择LoadRunner Protocol的两大定律