HTML input的multiple属性应用场景？多文件上传功能实现-html教程-PHP中文网

multiple属性仅对type="file"有效，其他类型无效；需用input.files获取文件列表，配合formdata.append逐个添加上传；务必前置校验大小与类型，并注意重复文件去重。

html input的multiple属性应用场景？多文件上传功能实现

其他 type 值（比如 text、email）加了 multiple 完全没作用，浏览器会忽略。只有 <input type="file" multiple> 才能触发多选文件行为——这是最常被误用的点。

注意：即使加了 multiple，用户仍可单选；它只是「允许」多选，不是「强制」多选。

Chrome / Edge / Firefox / Safari（macOS 12.3+）都支持，但旧版 Safari（iOS 15.4 之前）不支持拖拽多文件，仅支持按住 Cmd/Ctrl 点击选择
accept 属性可以配合使用，比如 accept="image/*,.pdf"，但它只过滤弹窗里的文件类型，不能阻止用户绕过界面手动输入非法后缀
移动端部分 Android 浏览器（如 Samsung Internet）可能只允许一次选一个，即使写了 multiple

input.value 对于多文件上传永远只返回第一个文件名（或空字符串），毫无意义。真正要读的是 input.files——它是一个 FileList 对象，类似数组但不是 Array。

常见错误写法：input.value.split(',') 或 Array.from(input.value)，这根本拿不到文件内容或大小。

Wechat HTML Publisher

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

下载

正确访问方式：input.files[0]、input.files.item(0)、或转成数组处理：Array.from(input.files)
input.files 是只读的，无法手动 push 或赋值，也不能用 forEach（需先转数组）
每个 File 对象包含 name、size、type、lastModified，但不含路径（出于安全限制，file.path 在所有现代浏览器中均为 undefined）

不要试图把整个 FileList 直接塞进 FormData。虽然 formData.append('files', input.files) 在部分浏览器中“看似”能工作，但行为不一致：Chrome 可能发成一个字段含多个文件，Firefox 可能只传第一个。

稳妥做法是遍历并为每个文件单独 append，服务端才能稳定接收为同名字段的多个值（如 PHP 的 $_FILES['files']['name'][0]）。

示例：

const formData = new FormData();
for (const file of input.files) {
  formData.append('files', file); // 同名 key，后端收为数组
}

如果后端要求区分字段名（如 file1、file2），就用 formData.append(`file${i}`, file)
别忘了在 fetch 或 XMLHttpRequest 中省略 Content-Type 头——浏览器会自动设置带 boundary 的 multipart/form-data

用户勾选 20 个 500MB 视频再点上传，前端不拦截，等十几秒后才报 413 Request Entity Too Large，体验极差。校验必须前置。

检查总大小：Array.from(input.files).reduce((sum, f) => sum + f.size, 0)，超过阈值（如 2GB）直接提示并 return
检查单个文件类型：用 file.type 或 file.name.split('.').pop().toLowerCase() 做简单后缀判断（注意 type 可能为空，如本地 txt 文件）
上传中显示进度：XMLHttpRequest.upload.onprogress 可监听单个请求，但多个文件需自己聚合；fetch 暂无原生进度支持，得靠 ReadableStream 分块读取重写逻辑