使用FormData实现无表单拖拽上传，PHP无法接收文件求助

核心问题：PHP端读取位置错误 #

你当前的PHP代码只输出了$_POST和$_GET，但通过multipart/form-data方式上传的文件，PHP会把文件数据存放在**$_FILES数组**中，而非$_POST/$_GET。

修正后的PHP代码 #

<?php
var_dump($_FILES); // 查看上传的文件数据
var_dump($_POST); // 若有其他表单字段可保留

前端代码的正确性验证 #

你的JavaScript代码核心配置是正确的：

• contentType: false：让jQuery不要自动设置Content-Type，FormData会自动生成正确的multipart/form-data; boundary=...请求头
• processData: false：阻止jQuery把FormData转换成字符串，避免破坏文件二进制数据

额外补充完整拖拽逻辑（需阻止浏览器默认行为）：

// 绑定拖拽区域的drop事件
document.getElementById('drop-area').addEventListener('drop', function(e) {
    e.preventDefault(); // 必须阻止默认行为，避免浏览器自动打开文件
    e.stopPropagation();
    
    if (e.dataTransfer?.items) {
        for (const item of e.dataTransfer.items) {
            if (item.kind === 'file') {
                const file = item.getAsFile();
                const fileFormData = new FormData();
                fileFormData.append('file', file);
                
                $.ajax({
                    url: "backend/uploadFiles.php",
                    type: 'POST',
                    data: fileFormData,
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function (returndata) {
                        console.log(returndata);
                    },
                    error: function(xhr, status, err) {
                        console.error('上传失败:', err);
                    }
                });
            }
        }
    }
});

// 绑定dragover事件，同样需要阻止默认行为
document.getElementById('drop-area').addEventListener('dragover', function(e) {
    e.preventDefault();
    e.stopPropagation();
});

其他排查点 #

如果修正后仍无法接收文件，检查以下内容：

• 确认backend/uploadFiles.php路径正确，无404错误
• 检查PHP配置文件php.ini：
  • upload_max_filesize：设置的上限需大于待上传文件大小
  • post_max_size：该值需大于upload_max_filesize
• 查看浏览器开发者工具的Network面板，确认请求发送成功、FormData中已包含文件数据

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