项目中需要做一个拖拽文件上传功能,遇到获取文件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) {
...
}
});
};