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

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