如何在HTML表单中添加文件上传-html教程-PHP中文网

文件上传必须使用type="file"，form设enctype="multipart/form-data"且method为post；name属性必填，多选加multiple，accept仅提示；js用formdata时键名须与后端一致；服务端需检查文件大小限制和临时目录权限。

如何在html表单中添加文件上传

file input 必须设 `type="file"` 才能触发选择文件对话框

浏览器只认 <input type="file"> 为文件上传控件，其他类型（比如 text 或 button）即使加了 accept 或 multiple 也无效。常见错误是漏写 type 属性，或误写成 type="file-upload" 这类自定义值——浏览器会直接降级为普通文本框。

实操建议：

name 属性必须设置，否则后端收不到字段名（如 name="avatar"）
加 id 方便用 <label for="xxx"></label> 关联，提升可访问性
默认只选单个文件，要多选必须显式加 multiple 属性
accept 是提示性过滤（如 accept="image/*,.pdf"），不能替代后端校验

表单 `enctype` 不设为 `"multipart/form-data"` 就传不了文件

HTML 表单默认用 application/x-www-form-urlencoded 编码，这种格式无法携带二进制文件数据。一旦用了 <input type="file">，就必须把 <form></form> 的 enctype 改成 "multipart/form-data"，否则文件字段在提交时会被静默丢弃，后端完全收不到。

常见错误现象：表单看起来提交成功，但后端 request.files 为空或报 KeyError。

实操建议：

检查 <form></form> 标签是否包含 enctype="multipart/form-data"
如果用 JavaScript 提交（如 fetch），不能靠表单自动编码，得手动构造 FormData 对象
method 必须为 POST（GET 不支持文件上传）

用 `FormData` 提交时，`append()` 的键名要和后端期待的一致

前端用 JS 控制上传时，常通过 new FormData(formEl) 或手动 append() 构造数据。这里容易出错的是字段名不匹配：比如 HTML 中 <input name="cover">，但 JS 里写成 formData.append("image", file)，后端就收不到 cover 字段。

示例对比：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

正确 JS 写法：

const form = document.getElementById('upload-form');
const formData = new FormData(form); // 自动提取 name="document"
// 或手动：
// const file = form.querySelector('[name="document"]').files[0];
// formData.append("document", file);

注意：files[0] 是 File 对象，不是路径字符串；files 是 FileList，即使没选文件也不会报错，但长度为 0。

服务端接收失败？先确认 `maxFileSize` 和临时目录权限

前端一切正常，但后端报 “empty file” 或超时，大概率是服务端限制：Node.js 的 multer 默认限制 1MB，Python Flask 的 MAX_CONTENT_LENGTH 默认是 16MB，PHP 的 upload_max_filesize 和 post_max_size 也常卡在 2MB。

另一个隐藏坑是临时上传目录不可写（尤其 Linux 部署时），导致文件根本没落地，后端读到空流。

排查建议：