如何使用JavaScript发送POST数据到新页面并重载时保留POST数据

现有代码的两个核心问题 #

• FormData追加多文件不能直接传入数组，需要循环每个文件单独调用append，且字段名末尾要加[]，否则PHP只能识别到最后一个文件
• 不要手动设置multipart/form-data请求头，用XHR发送FormData对象时浏览器会自动生成带边界标识的请求头，手动设置会丢失边界参数导致后端无法解析表单数据

方案1：保持异步提交，无需刷新即可让filesLogic.php拿到完整数据 #

直接把AJAX请求的目标地址改为filesLogic.php，不需要在页头引入该文件，调整后的提交逻辑如下：

form.addEventListener('submit', (event) => {
  event.preventDefault();
  const uploadName = document.getElementById("uploadnaam").value;
  const formData = new FormData();
  // 循环追加所有选中的文件
  storedFiles.forEach(file => {
    formData.append("theFiles[]", file);
  });
  formData.append("uploadName", uploadName);
  formData.append("th", 'th');

  const xhr = new XMLHttpRequest();
  // 直接请求业务逻辑文件
  xhr.open("POST", "filesLogic.php", true);
  // 移除手动设置的Content-Type，由浏览器自动生成
  xhr.send(formData);

  xhr.onload = () => {
    if(xhr.status === 200) {
      // 处理完成后如果需要刷新页面直接调用即可
      location.reload();
      // 如果需要携带处理结果，也可以拼接查询参数跳转：location.href = 'index.php?status=success'
    }
  };
});

调整后你直接在filesLogic.php中通过$_FILES['theFiles']获取上传的文件数组，$_POST获取普通表单字段即可。

方案2：原生表单提交，重载页面时保留所有POST数据 #

如果需要页面重载的原生提交效果，只需要每次用户选完文件后，把选中的文件存入隐藏的文件输入框中，最后统一提交即可，不需要走AJAX：

1. 先修改HTML表单标签，配置提交地址和编码类型：

<form title='upload files' id='myform' action="filesLogic.php" method="post" enctype="multipart/form-data">

2. 修改文件选择处理逻辑，新增隐藏输入框存储分批选中的文件：

function handleFileSelect(e) {
  if (!e.target.files) return;
  const files = e.target.files;
  // 创建隐藏的文件输入框存储本次选中的文件
  const hiddenFileInput = document.createElement('input');
  hiddenFileInput.type = 'file';
  hiddenFileInput.name = 'files[]';
  hiddenFileInput.multiple = true;
  hiddenFileInput.style.display = 'none';
  hiddenFileInput.files = files;
  // 插入到当前表单中
  form.appendChild(hiddenFileInput);
  // 清空原有文件输入框的值，允许用户重复选择同一批文件
  e.target.value = '';
}

3. 移除submit事件中的event.preventDefault()和AJAX相关逻辑，直接用原生表单提交即可，重载后filesLogic.php可以拿到所有分批上传的文件和表单字段。

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