HTML input标签type=file文件选择用法

在开发过程中，如果曾接触过文件上传功能，大概率会遇到那个令人困惑的“C:\fakepath\...”路径。请不必担心，这并不是代码写错了，而是浏览器出于安全考虑，主动屏蔽了真实的本地文件路径。接下来，我们将把看似简单的文件选择框的方方面面彻底讲清楚。

为什么 `input[type="file"]` 的 `value` 总是 `C:\fakepath\...`

这是所有主流浏览器（Chrome、Edge、Firefox、Safari）共同遵守的安全规则，目的是防止网页脚本窥探用户的本地文件系统结构。因此，永远无法通过 `input.value` 拿到完整的真实路径，也不应该依赖它来做任何逻辑判断。

真正有用的文件信息隐藏在 `input.files` 这个 `FileList` 对象中。以下是一些关键点：

• `input.files[0]` 是第一个被选中的 `File` 对象实例，包含 `name`、`size`、`type`、`lastModified` 等可靠属性。
• 如果开启了多选（添加了 `multiple` 属性），`input.files.length` 会显示实际选中的文件数量，而 `input.value` 依然只显示第一个文件的假路径。
• 需注意一个容易踩的坑：当用户清空选择（比如再次点击文件选择框后取消），`input.files.length` 会变为 `0`，但 `input.value` 可能还残留着旧的文件名。因此，所有判断都必须以 `files` 属性为准。

如何用 `accept` 真正限制可选文件类型

许多人以为加了 `accept` 属性就万事大吉，实际上并非如此。它主要起提示和过滤作用，而非强制校验。用户完全可以在文件选择对话框里，手动将“文件类型”下拉菜单切换到“所有文件(*.*)”来绕过限制。

不过，正确的写法依然能提升大部分用户的体验。`accept` 的写法取决于你想匹配的维度：

• 按 MIME 类型：`accept="image/png,image/jpeg"` 或 `accept="application/pdf"`
• 按扩展名：`accept=".png,.jpg,.jpeg"`（注意前面的点号不能省略）
• 按类型通配：`accept="image/*"`（匹配所有图片类型）、`accept="video/*"`
• 混合写法：`accept="image/*,.pdf,application/msword"`

需要注意的是，不同浏览器对 `accept` 的支持存在差异。例如 Safari 对扩展名写法的支持较弱。在移动端，iOS 上使用 `accept="image/*"` 时，可能会同时弹出相机和图库选项，如果只想调用前置摄像头，可以加上 `capture="user"` 属性。

怎样监听并读取用户选中的文件

监听文件选择动作，不要使用 `click` 或 `input` 事件，`change` 事件才是唯一可靠的信号。它只在用户完成选择并确认后触发。

一个典型的文件读取流程如下：

• 绑定 `change` 事件监听器：`input.addEventListener('change', handler)`
• 在事件处理函数中，从 `e.target.files` 获取文件列表，并检查其长度是否大于 0。
• 针对每一个 `File` 对象，创建一个 `FileReader` 实例来读取内容。
• 根据用途选择 `FileReader` 的读取方法：`readAsText()`（读取文本内容）、`readAsDataURL()`（获取 Base64 数据，常用于图片预览）、`readAsArrayBuffer()`（处理二进制数据）。

下面是一个读取第一个文件为文本并打印的简单示例：

input.addEventListener('change', e => {
  const file = e.target.files[0];
  if (!file) return;
  const reader = new FileReader();
  reader.onload = () => console.log(reader.result);
  reader.readAsText(file);
});

上传前必须做的客户端校验项

必须明确一点：前端的所有校验都只是为了提升用户体验和即时反馈，绝不能替代服务端的严格验证。不过，在文件被选中后，立即进行以下几项检查非常有意义：

• 检查是否为空：确认 `files.length` 不为 0，以防用户只是点开又取消了选择。
• 检查文件大小：遍历每个 `file`，用 `file.size` 判断是否超出限制（比如大于 5MB），并提前给用户明确的提示。
• 二次校验文件类型：虽然设置了 `accept`，但最好再用 `file.type` 属性，或者通过 `file.name.split('.').pop().toLowerCase()` 提取扩展名，进行二次比对，实现交叉验证。
• 注意表单键名：如果需要上传多个文件，使用 `FormData.append('files', file)` 时，要注意键名（如 `'files'`）是否与后端接口的约定一致。单文件上传常用 `'file'`，多文件上传则建议使用能标识数组的键名，并确保后端能正确解析。

还有两个容易被忽略的细节：即使给 `input` 设置了 `required` 属性，用户也可能通过禁用 JavaScript 然后手动提交表单来绕过。因此，在表单提交时，仍需用 JavaScript 检查 `files.length`。另外，`File` 对象本身是不可序列化的，千万不能尝试把它直接放进 `JSON.stringify()` 里发送。