拖拽上傳獲取上傳文件信息,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) {
      ...
    }
  });
};