HTML网页中如何实现异步文件表单提交-html教程-PHP中文网

用 fetch 提交表单需拦截 submit 事件并用 formdata 包装数据，不可直接传 form 元素；文件字段自动包含，服务端须解析 multipart/form-data；需禁用按钮防重复提交，并在错误时恢复状态。

html网页中如何实现异步文件表单提交

用 `fetch` 提交表单，不刷新页面

直接替换传统 <form method="POST"></form> 的提交行为，是最轻量、兼容性够用的方案。关键不是“禁用 submit”，而是拦截事件后手动构造数据。

常见错误是直接传 form 元素给 fetch——它不认这个对象。得用 FormData 包装：

const form = document.querySelector('form');
form.addEventListener('submit', async (e) => {
  e.preventDefault();
  const data = new FormData(form);
  const res = await fetch('/upload', {
    method: 'POST',
    body: data // ✅ 直接传 FormData，不用设 Content-Type
  });
  console.log(await res.json());
});

文件字段（<input type="file">）会被自动包含，多选、多个 input 都没问题
服务端收到的是 multipart/form-data，和原生表单提交完全一致
不要手动设置 Content-Type 头——浏览器会自动生成带 boundary 的正确值，设了反而出错

上传进度监控必须用 `XMLHttpRequest`

fetch 不支持上传进度事件，这是硬限制。如果需要显示进度条（比如大文件上传），只能切回 XMLHttpRequest。

别写裸的 new XMLHttpRequest()，用封装好的 Promise 版本更可控：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

function uploadWithProgress(form) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    const data = new FormData(form);
    xhr.upload.onprogress = (e) => {
      if (e.lengthComputable) {
        const percent = (e.loaded / e.total) * 100;
        console.log(`上传中：${percent.toFixed(1)}%`);
      }
    };
    xhr.onload = () => resolve(JSON.parse(xhr.response));
    xhr.onerror = reject;
    xhr.open('POST', '/upload');
    xhr.send(data);
  });
}