拖拽文件上传无法提交，$_POST与$_FILES数组为空求助

原因分析 #

你用的这套拖拽上传代码只实现了文件预览功能，并没有将选中的文件关联到表单的提交数据中。常规的<input type="file">是表单原生控件，提交时会自动被纳入表单提交数据集；但这套拖拽代码仅通过JavaScript读取文件对象用于预览，没有把这些文件对象注入到表单提交流程里，所以点击提交按钮时，表单根本没携带拖拽选中的文件，自然$_POST和$_FILES为空。

解决方法 #

有两种可行的改造方案，按需选择：

方案一：手动构建FormData，用AJAX提交表单 #

1. 先定义变量存储选中的文件：

let selectedFiles = [];

2. 在拖拽上传的drop事件处理逻辑里，把获取到的文件存入变量：

// 替换原代码中处理drop事件的对应逻辑
selectedFiles = Array.from(e.dataTransfer.files);

3. 监听表单提交事件，阻止默认行为后手动构建数据提交：

document.querySelector('form').addEventListener('submit', function(e) {
  e.preventDefault();
  // 基于表单创建FormData，自动包含表单内其他字段
  const formData = new FormData(this);
  // 将拖拽选中的文件添加到FormData
  selectedFiles.forEach(file => {
    formData.append('uploaded_files[]', file);
  });
  // 用Fetch API提交（也可使用XMLHttpRequest）
  fetch('你的后端处理脚本.php', {
    method: 'POST',
    body: formData
  })
  .then(res => res.text())
  .then(result => {
    // 处理后端返回结果，比如上传成功提示
    console.log(result);
  })
  .catch(err => console.error('上传失败:', err));
});

后端可通过$_FILES['uploaded_files']获取这些文件。

方案二：用隐藏的原生文件输入关联拖拽文件 #

1. 在表单内添加一个隐藏的原生文件输入控件：

<input type="file" id="hidden-drag-input" multiple style="display: none;">

2. 在拖拽上传的drop事件处理逻辑里，将获取到的文件赋值给这个隐藏输入的files属性：

// 在drop事件处理代码中添加这行
document.getElementById('hidden-drag-input').files = e.dataTransfer.files;

表单提交时，这个隐藏输入的文件会被自动纳入提交数据，后端可通过$_FILES['hidden-drag-input']获取拖拽文件，处理逻辑和常规文件上传完全一致。

内容的提问来源于stack exchange，提问作者alex