拖拽上传获取上传文件信息,e.dataTransfer.files始终为空的解决方案

2019独角兽企业重金招聘Python工程师标准>>>

项目中需要做一个拖拽文件上传功能,遇到获取文件e.dataTransfer.files始终为空的情况,多次尝试,终于找到如下解决方案(附文件上传功能)

var enter=fucntion(e){...
},
leave=fucntion(e){...
},
drop = function(e) {//方法一,这种方法为网络常见方法,经多次实验不成功,files总是为空var files = e.dataTransfer.files;//方法二,这种方法另辟蹊径,巧妙的运用了forEach函数,经实验可成功获取文件var files = [];[].forEach.call(e.dataTransfer.files, function(file) {files.push(file);},false);console.log(files);
}hotarea.addEventListener('dragenter', enter);
hotarea.addEventListener('dragover', enter);
droparea.addEventListener('dragleave',leave);
droparea.addEventListener("drop",drop);

附:文件上传功能

var chooseFile = function() { //打开文件选择窗口$('<input type="file" name="file" class="file" multiple="">').change(function() {upload(this.files);}).trigger("click");
}
,upload = function(files) {//开始上传//files即上传按钮和前文获取的文件var formData = new FormData();var uploadFiles = new Array();var param={a:a,b:b};//上传文件时同时向后台传递的参数if (!files.length) return;//formData.append('file', files[i]);//上传单个文件的添加方式for (var i in files) formData.append('file[]', files[i]); //上传多个文件的添加方式formData = $.extend(formData, param);$.ajax({type: "POST",url: url,data: formData,processData: false,//告诉jQuery不要去处理发送的数据contentType: false,//告诉jQuery不要去设置Content-Type请求头success: function(res) {...}});
};

转载于:https://my.oschina.net/u/3552749/blog/1817898

拖拽上传获取上传文件信息,e.dataTransfer.files始终为空的解决方案相关推荐

拖拽或点击上传(支持苹果safari浏览器)
<input type="file" value="上传"> 拖拽或点击上传(在safari浏览器不支持拖拽),主要解决safari浏览器的拖拽问 ...
Unity UGUI基础之 Scroll View/Scroll Rect 的简单使用，并取消拖拽(滑动内容)效果，拖拽只在Scrollbar 上起作用
Unity UGUI基础之 Scroll View/Scroll Rect 的简单使用,并取消拖拽(滑动内容)效果,拖拽只在Scrollbar 上起作用目录 Unity UGUI基础之 Scro ...
python获取word页数_python,_如何在 Linux 上使用 Python 读取 word 文件信息（如页数）？，python - phpStudy...
如何在 Linux 上使用 Python 读取 word 文件信息(如页数)? R.T. doc 是二进制文件,Python 如何进行读取呢? .docx 可用 python-docx 读取,但如何读 ...
js拖拽图片到浏览器上传
拖拽的事件有很多,这个懂的都懂不懂的就- <!doctype html> <html> <head> <meta charset="utf-8&qu ...
Vue3+TypeScript实现网易云音乐WebApp（播放界面：播放、暂停、音量控制、播放进度控制(点击/拖拽进度条)、上一首、下一首）
1. 成果展示真实接口地址本项目使用的是真实线上的网易云API 线上演示地址目前只做了每日推荐(需登录)以及排行榜功能,点个star吧大佬们! 项目GitHub地址 main分支是Vue3+Ty ...
flutter 拖拽布局_Flutter 史上最牛拖动控件 Draggable
不多说,我们肯定遇到过这个需求: 把一个控件从当前位置移动到另一个位置.可能需求最多的就像是支付宝应用页面的编辑: 比如,我想把最近使用的红包添加到我的应用当中,支付宝这里是用的 + 号. 那 ...
拖拽图片在Label上显示
原文:http://www.cppblog.com/biao/archive/2011/10/23/158940.html 首先看下效果,左边是没有原始Label,右侧是把图片拖动到Label上显示效 ...
vue 拖拽小图标获取坐标位置
遇到一个功能,在固定的一张图或者说一个框内有一个小图标可以拖拽,并且能拿到他当前位置的坐标,如下图二维码小图标代码如下 <!-- 拖拽小图标 v-drag:拖拽效果,配置当前元素positio ...
手机端拖拽事件，获取pageX和pageY坐标方式
手机端拖拽事件: touchstart事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发. touchmove事件:当手指在屏幕上滑动的时候连续地触发.在这个事件发生期间,调用prev ...

拖拽上传获取上传文件信息,e.dataTransfer.files始终为空的解决方案

拖拽上传获取上传文件信息,e.dataTransfer.files始终为空的解决方案相关推荐

最新文章

热门文章