原生JavaScript实现AJAX后$_FILES无法接收文件输入的问题

你当前的代码存在两个核心问题导致无法获取$_FILES：

1. 错误处理FormData：你把FormData拆解成了application/x-www-form-urlencoded格式的字符串，文件对象无法通过这种文本格式传递，必须直接发送FormData实例。
2. 请求头冲突：手动设置了Content-type: application/x-www-form-urlencoded，而文件上传需要的是multipart/form-data，且XMLHttpRequest在发送FormData时会自动正确设置该请求头，手动设置反而会破坏文件上传的格式。

JavaScript部分 #

var ajaxResponse = "";
var qForm = document.getElementById('myForm');
qForm.addEventListener("submit", function(e) {
  e.preventDefault();
  var formData = new FormData(qForm);
  checkForm(formData);
  console.log(ajaxResponse);
});

// 直接传递FormData，不再拆解成字符串
function checkForm(formData) {
  ajaxRequestReturn("checkForm.php", formData);
}

function ajaxRequestReturn(phpRequest, formData) {
  var req = new XMLHttpRequest();
  // 建议改为异步请求，同步请求会阻塞主线程
  req.open("POST", phpRequest, true);
  // 移除手动设置的Content-type，让浏览器自动处理
  req.onload = function() {
    if (req.status >= 200 && req.status < 400) {
      ajaxResponse = this.responseText;
    } else {
      throw new Error("请求失败，状态码：" + req.status);
    }
  }
  req.onerror = function() {
    throw new Error("网络请求错误");
  }
  // 直接发送FormData实例
  req.send(formData);
}

关键说明 #

• 直接传递并发送FormData实例，确保文件数据以正确的multipart/form-data格式传递给PHP。
• 移除手动设置的Content-type，浏览器会自动为FormData请求添加正确的头信息（包括边界标识）。
• 建议将同步请求改为异步（open的第三个参数设为true），同步请求会阻塞浏览器主线程，影响用户体验。如果需要在请求完成后执行操作，可以把逻辑放在onload回调里，而非依赖全局变量。

PHP端验证 #

你的checkForm.php代码无需修改，现在var_dump($_FILES)应该能正确输出文件信息了。

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