拖拽上传文件无法提交至PHP，仅选文件可用，寻求技术协助

问题根源 #

当前代码中，拖拽文件时会通过uploadFile函数用XMLHttpRequest单独上传每个文件，而非将这些文件加入表单的files[]输入控件中。这导致：

• 拖拽的文件被单独发送，且FormData中仅包含单个file字段（而非PHP期望的files[]数组）
• 表单提交时仅发送通过选择按钮添加的文件，拖拽的文件不会被包含

修复方案 #

我们需要修改JavaScript逻辑，将拖拽的文件与选择的文件统一收集，在表单提交时一起发送到PHP，同时保留预览和进度功能。以下是完整的修改代码：

修改后的JavaScript代码 #

let dropArea = document.getElementById("drop-area");
let fileInput = document.getElementById("fileElem");
let gallery = document.getElementById("gallery");
let progressBar = document.getElementById("progress-bar");
let allFiles = []; // 存储所有选择和拖拽的文件

// 阻止默认拖拽行为;['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
  dropArea.addEventListener(eventName, preventDefaults, false);
  document.body.addEventListener(eventName, preventDefaults, false);
});

// 拖拽进入/悬停时高亮区域;['dragenter', 'dragover'].forEach(eventName => {
  dropArea.addEventListener(eventName, highlight, false);
});;['dragleave', 'drop'].forEach(eventName => {
  dropArea.addEventListener(eventName, unhighlight, false);
});

// 处理拖拽放下事件
dropArea.addEventListener('drop', handleDrop, false);

// 监听文件选择事件
fileInput.addEventListener('change', function() {
  addFiles(this.files);
});

// 监听表单提交事件
document.querySelector('form').addEventListener('submit', handleFormSubmit);

function preventDefaults(e) {
  e.preventDefault();
  e.stopPropagation();
}

function highlight(e) {
  dropArea.classList.add('highlight');
}

function unhighlight(e) {
  dropArea.classList.remove('highlight');
}

function handleDrop(e) {
  let dt = e.dataTransfer;
  let files = dt.files;
  addFiles(files);
}

// 添加文件到全局数组并生成预览
function addFiles(files) {
  files = [...files];
  files.forEach(file => {
    // 避免重复添加相同文件
    if (!allFiles.some(existing => existing.name === file.name && existing.size === file.size)) {
      allFiles.push(file);
      previewFile(file);
    }
  });
  initializeProgress(allFiles.length);
}

function initializeProgress(numFiles) {
  progressBar.value = 0;
}

function updateProgress(percent) {
  progressBar.value = percent;
}

function previewFile(file) {
  let reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onloadend = function() {
    let img = document.createElement('img');
    img.src = reader.result;
    gallery.appendChild(img);
  }
}

// 处理表单提交，用XHR统一发送所有数据
function handleFormSubmit(e) {
  e.preventDefault();
  
  let form = this;
  let formData = new FormData(form);
  
  // 将所有文件添加到FormData，字段名匹配PHP的$_FILES['files']
  allFiles.forEach(file => {
    formData.append('files[]', file);
  });
  
  let xhr = new XMLHttpRequest();
  xhr.open('POST', form.action, true);
  xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
  
  // 更新上传进度
  xhr.upload.addEventListener("progress", function(e) {
    if (e.lengthComputable) {
      let percent = (e.loaded / e.total) * 100;
      updateProgress(percent);
    }
  });
  
  // 处理上传完成事件
  xhr.addEventListener('readystatechange', function(e) {
    if (xhr.readyState == 4) {
      if (xhr.status == 200) {
        updateProgress(100);
        console.log('上传成功:', xhr.responseText);
        // 重置表单和预览区
        form.reset();
        gallery.innerHTML = '';
        allFiles = [];
      } else {
        console.error('上传失败:', xhr.statusText);
      }
    }
  });
  
  xhr.send(formData);
}

修改说明 #

1. 新增全局数组allFiles：统一存储选择和拖拽的文件，避免重复添加
2. 重构文件处理逻辑：
   • 选择文件或拖拽文件时，均将文件加入allFiles并生成预览
3. 拦截表单默认提交：
   • 改用XMLHttpRequest提交表单，将所有表单字段和文件统一放入FormData
   • 字段名files[]与PHP接收参数一致，确保服务器能正确解析
4. 统一进度条更新：基于整个表单的上传进度更新进度条，更符合用户预期

PHP代码无需修改 #

你的PHP代码已经能正确处理files[]数组，提交后$_FILES['files']会包含所有选择和拖拽的文件。

HTML代码微调（可选） #

移除fileElem的onchange="handleFiles(this.files)"属性，因为我们已通过事件监听器处理选择文件逻辑：

<input type="file" name="files[]" id="fileElem" multiple accept="image/*">

修改后，无论是选择文件还是拖拽文件，都会被统一收集并在表单提交时一起发送到PHP，服务器端就能正常接收所有文件了。

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