HTML5Ajax无刷新上传方法详解

对于一个文章开发者来说，牢固扎实的基础是十分重要的，golang学习网就来带大家一点点的掌握基础知识点。今天本篇文章带大家了解《HTML5 Ajax无刷新上传技巧》，主要介绍了，希望对大家的知识积累有所帮助，快点收藏起来吧，否则需要时就找不到了！

不用。HTML表单enctype仅对直接提交生效，Ajax上传绕过该机制；关键要用FormData构造请求体，由浏览器自动设置含boundary的Content-Type，手动设置会破坏multipart格式。

用 XMLHttpRequest 上传文件时必须设置 enctype 吗？

不用。HTML 表单的 enctype 属性只在表单**直接提交**（非 Ajax）时生效；Ajax 上传完全绕过表单提交机制，所以 enctype="multipart/form-data" 对 XMLHttpRequest 无实际作用——它甚至会被忽略。

真正关键的是：必须用 FormData 构造请求体，并让浏览器自动设置正确的 Content-Type（含 boundary）。手动设 Content-Type 反而会破坏 multipart 格式。

• ✅ 正确做法：

  const fd = new FormData();
  fd.append('file', input.files[0]);
  fd.append('name', 'report.pdf');
  
  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload');
  // 不要 setRequestHeader('Content-Type')！
  xhr.send(fd);

• ❌ 常见错误：手动设置 Content-Type: multipart/form-data，导致服务端收不到文件字段
• ⚠️ 注意：FormData 不能通过 JSON.stringify() 转换，也不支持直接赋值给 xhr.send() 的字符串参数

fetch 上传文件时如何监听进度？

fetch 本身不提供上传进度回调，但可通过 ReadableStream + TransformStream 手动拆包并计数，或更稳妥地回退到 XMLHttpRequest ——尤其在需兼容 Safari 15.4 之前版本时。

若坚持用 fetch，推荐封装一个带进度的包装函数：

• 监听方式依赖 XMLHttpRequest.upload.onprogress，fetch 没有等价 API
• 可借助 formdata-polyfill 或原生 FormData + XMLHttpRequest 组合实现稳定进度条
• 示例中不要用 fetch(...).then(r => r.json()) 直接处理响应，因为上传失败时可能返回 HTML 错误页而非 JSON，需先检查 response.ok

服务端接收不到 file 字段？排查这三处

前端看似正常发送，但后端 req.files 或 $_FILES 为空，大概率不是跨域问题，而是字段名/结构不匹配。

• 确认 FormData.append() 的第一个参数（字段名）和服务端预期一致，例如 Node.js multer 默认期待 file，PHP $_FILES['file']
• 避免重复 append 同名字段却不加索引，如 fd.append('file', f1); fd.append('file', f2)，某些后端只取第一个
• 如果上传多个文件，建议用数组式命名：fd.append('files[]', f1); fd.append('files[]', f2)，再配合后端解析逻辑
• Chrome DevTools 的 Network → Payload 标签页里，点开请求可查看真实 multipart body，确认 boundary 是否存在、字段是否被包裹

移动端 iOS Safari 上传大文件卡住？

iOS Safari 对 XMLHttpRequest 上传有隐式限制：当文件 > ~50MB 且未设置超时或未监听 loadstart / progress 时，可能静默失败或长时间 pending。

• 务必设置 xhr.timeout = 300000（5 分钟），并监听 timeout 事件给出提示
• 即使不显示进度条，也建议注册 xhr.upload.onloadstart，否则某些 iOS 版本不会真正触发上传
• 避免在 input[type="file"] 上直接用 click() 模拟唤起——iOS 需用户真实点击，否则 files 为 null
• 上传前可用 file.size 做客户端校验，比如提示“文件不能超过 100MB”，比服务端报错体验更好

实际项目里最常被忽略的，是服务端对 multipart 解析器的字段大小限制（如 Express multer 的 limits.fileSize、Nginx 的 client_max_body_size），前端一切正常，但文件一到网关就被截断——得前后端一起看日志。

文中关于html5怎么上传服务器的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《HTML5Ajax无刷新上传方法详解》文章吧，也可关注golang学习网公众号了解相关技术文章。