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

最新推荐文章于 2025-06-26 16:56:46 发布

转载最新推荐文章于 2025-06-26 16:56:46 发布 · 5.1k 阅读

6 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/3552749/blog/1817898

文章标签：

#javascript #python #前端 #ViewUI

本文介绍了一种解决拖拽文件上传时e.dataTransfer.files为空的问题，并提供了一种使用forEach函数成功获取文件的方法，同时还分享了一个文件上传的功能实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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