XMLHttpRequest文件上传仅显示进度，文件未存入服务器文件夹求助

以下是针对你文件上传失败问题的核心排查点和修复方案：

1. 确认form变量是否正确获取表单DOM #

你的JS代码中new FormData(form)的form必须是真实的表单DOM元素，否则FormData为空，服务器无法接收数据。

• 修复方式：给表单添加id，再通过JS获取：

  <!-- index.html 中修改表单 -->
  <form id="uploadForm" action="#">
    <!-- 你的文件输入框等元素 -->
  </form>
  

  // script.js 中修改
  const form = document.getElementById('uploadForm');
  function uploadFile(name){
    let xhr = new XMLHttpRequest();
    xhr.open("POST","upload.php");
    xhr.upload.addEventListener("progress", ({loaded,total})=>{
      let fileLoaded = Math.floor((loaded/total) *100);
      let fileTotal = Math.floor(total/1000); 
      console.log(fileLoaded,fileTotal);
    });
    let formData = new FormData(form); // 此时form为正确的DOM元素
    xhr.send(formData);
  }
  

2. 修正PHP端的文件处理逻辑 #

移除isset($_POST['submit'])判断后，需直接基于$_FILES处理上传，而非依赖submit字段。示例代码：

// upload.php 中修改
$fileInputName = "user_file"; // 替换为你表单中文件输入框的name属性值
$targetDir = "uploads/"; // 目标存储文件夹

// 检查文件是否正常上传
if(isset($_FILES[$fileInputName]) && $_FILES[$fileInputName]['error'] === UPLOAD_ERR_OK){
  $targetFile = $targetDir . basename($_FILES[$fileInputName]['name']);
  
  // 确保目标文件夹存在，不存在则创建
  if(!is_dir($targetDir)){
    mkdir($targetDir, 0755, true);
  }
  
  // 移动临时文件到目标文件夹
  if(move_uploaded_file($_FILES[$fileInputName]['tmp_name'], $targetFile)){
    echo "文件上传成功";
  } else {
    echo "文件移动失败，请检查文件夹权限";
  }
} else {
  $errorCode = $_FILES[$fileInputName]['error'] ?? "未知";
  echo "未收到文件或上传出错，错误码：". $errorCode;
}

• 注意：将user_file替换为你表单中文件输入框的name属性值（如<input type="file" name="user_file">）；同时确保服务器上的uploads/文件夹存在且有写入权限（一般设置为0755）。

3. 确认表单文件输入框的name属性 #

文件输入框必须设置name属性，否则FormData不会包含文件数据，PHP的$_FILES中也无法找到对应内容：

<!-- 正确写法 -->
<input type="file" name="user_file">
<!-- 错误写法：缺少name属性 -->
<input type="file">

4. 添加XHR状态监听用于调试（可选） #

给XHR添加响应监听，可直接在控制台查看服务器返回的错误信息，快速定位问题：

// 在script.js的xhr.send(formData)前添加
xhr.onload = function() {
  if(xhr.status === 200){
    console.log("服务器响应：", xhr.responseText);
  } else {
    console.log("请求出错，状态码：", xhr.status);
  }
};

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