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;
}
}
}
文件上传方法:ajaxFileUpload(formData) 可以参考 文件上传 文章中的方法,传送门=>>
js拖拽上传 文件上传之拖拽上传的更多相关文章
- TP5+阿里云OSS上传文件第三节,实现淘宝上传商品图片
**TP5+阿里云OSS上传文件第三节,实现淘宝上传商品图片首先我们来看看淘宝的功能和样式:** 之后看看制作完成的演示:(由于全部功能弄成GIF有点大,限制上传大小好像在1M之内,压缩之后也有1.9 ...
- layui结合SpringMVC上传文件以及携带额外的参数上传文件
今天在使用layui的过程中,遇到了使用其上传文件的模块.自己感觉文件上传还是bootstrapfileinput插件比较好用一些,灵活方便,bootstrapfileinput使用方法参考:http ...
- react native android 上传文件,Nodejs服务端获取上传的文件
React Native端 使用react-native-image-picker 做出选择图片的操作,选择完成后,直接将图片Post至服务器,保存在服务器的某个地方(保存图片的路径需要公开显示),并 ...
- ajax上传文件 基于jquery form表单上传文件
<script src="/static/js/jquery.js"></script><script> $("#reg-btn&qu ...
- WebAPI通过multipart/form-data方式同时上传文件以及数据(含HttpClient上传Demo)
简单的Demo,用于了解WebAPI如何同时接收文件及数据,同时提供HttpClient模拟如何同时上传文件和数据的Demo,下面是HttpClient上传的Demo界面 1.HttpClient部分 ...
- ftp上传文件,本地安装了,服务器上也需要在也安装一个ftp
服务器需要配置FTP服务: 你说的在你自己电脑上安装的只是一个FTP软件,用于连接远程服务器进行上传和下载文件的. 追问 在本地已经安装了,链接的话要在服务器上也安装一个吗? 追答 额,你有FTP服务 ...
- 上传文件表单file,限制上传文件类型的方法--参数accept
我们使用<input type="file" />来上传文件,但是当你只想要上传某种格式的文件,比如说(jpg)文件时.可以通过accept来限制. <form& ...
- 基于element ui 实现七牛云自定义key上传文件,并监听更新上传进度
借助上传Upload 上传组件的 http-request 覆盖默认的上传行为,可以自定义上传的实现 <el-upload multiple ref="sliderUpload&quo ...
- IOS--工作总结--post上传文件(以流的方式上传)
1.添加协议 <NSURLConnectionDelegate> 2.创建 @property (nonatomic,retain) NSURLConnection* aSynConnec ...
- input file实现多次上传文件(不会覆盖上次上传的文件)
html原生的file多选控件:<input class="className" type="file" name="name" ac ...
随机推荐
- CTF-WeChall-第四天上午
2020.09.12 08:24 哈哈,go on!
- Spring基于XML的IOC环境搭建及入门
一.使用Maven构建Java项目 * 项目目录结构 1. 在sun.service包下创建UserDao接口和接口实现类: UserDao接口: package sun.service; /** * ...
- 面试官:哪些场景会产生OOM?怎么解决?
这个面试题是一个朋友在面试的时候碰到的,什么时候会抛出OutOfMemery异常呢?初看好像挺简单的,其实深究起来考察的是对整个JVM的了解,而且这个问题从网上可以翻到一些乱七八糟的答案,其实在总结下 ...
- 分布式系统监视zabbix讲解九之使用snmp监控windows
zabbix监控windows演示 第一步:开启服务. 控制面板>程序>程序和功能>打开或关闭windows功能,勾选上简单网络管理协议(SNMP),以及下面的子程序.点击确定 第二 ...
- Java io实现读取文件特殊内容进行替换
最近公司在做一个项目其中一个需求是读取文件中的特殊字符在其后进行添加或删除字符操作,本来想直接使用randomAccessFile按行读取,读取到特殊字符就进行添加或删除操作,但是randomAcce ...
- 【微服务】 数据库案例理解Spring Security OAuth
突然被问,你是做技术的怎么不走技术路线呢?是啊~仔细想想至今做了这么多年的技术,研发过的系统&产品五花八门,涉及到的领域各行各业:政府.军队.公安.国安.石油&石化.金融.教育.华为等 ...
- ansible-doc到底有多好用,助你玩转各种模块
#使用ansible-doc:查看各种模块的帮助 #命令格式: ansible-doc -l #列出所有的模块列表 ansible-doc -s 模块名 #查看指定模块的参数 ansible-doc ...
- 刷题[CISCN2019 总决赛 Day2 Web1]Easyweb
解题思路 打开网页是这样一个登陆框,随机试了一下常见弱密钥,二次注入等.均是返回不同的猫咪图案 不同的id对应不同的猫咪图案.经测试,返回的id应该是无序,随机的.感觉这里有可能存在注入点,但是测试好 ...
- 新手学习Python第三方包库pip安装失败总结
这篇文章纯原创,是之前自己学习使用pyhton时遇到的问题,故在此记录一下. 问题与需求:用python下载第三方库或包的时候出错怎么办? 方法有一下三种,可以解决大部分的问题. 1.在cmd命令控制 ...
- Mongodb PHP封装类
分享一个Mongodb PHP封装类 <?php /** * Mongodb 基本操作API,支持基本类似关系统型数据库的操作接口 * * @version 1.0 * [说明] * * 1:该 ...