59. 文件上传 file 与图像提交

本节目标：学会让用户上传文件，包括多文件限制、文件类型过滤和拍照上传。

上传头像是注册页面的标配，分享图片是社交功能的基础。这些都靠 type="file"。

基础文件上传

<input type="file" name="resume">

点一下，弹出系统文件选择框。选中文件后，文件名显示在按钮旁边。

上传文件时，form 必须设置

和 enctype="multipart/form-data"，否则传不上去。

<form action="/upload" method="post" enctype="multipart/form-data">
  <input type="file" name="myfile">
  <button type="submit">上传</button>
</form>

multiple：多文件上传

加一个属性就能多选：

<input type="file" name="photos" multiple>

按住 Ctrl（Mac 上是 Command）可以多选文件，也可以拖拽选择一批。

提交时所有文件一起发送。

accept：限制文件类型

accept 属性限制用户只能选特定类型的文件。

<!-- 只允许图片 -->
<input type="file" name="avatar" accept="image/*">

<!-- 只允许 PNG 和 JPG -->
<input type="file" name="photo" accept="image/png, image/jpeg">

<!-- 只允许 PDF -->
<input type="file" name="doc" accept=".pdf">

<!-- 允许多种类型 -->
<input type="file" name="file" accept="image/*, .pdf, .docx">

accept 只是前端筛选，用户可以在文件选择框里切换成”所有文件”。服务器端仍然要验证文件类型。

capture：调用摄像头

在移动端，capture 可以直接调起摄像头拍照：

<!-- 直接拍照 -->
<input type="file" name="photo" accept="image/*" capture>

<!-- 指定前置摄像头 -->
<input type="file" name="selfie" accept="image/*" capture="user">

<!-- 指定后置摄像头 -->
<input type="file" name="receipt" accept="image/*" capture="environment">

适合扫码、拍照上传等场景。

显示选中的文件名

<input type="file" name="file" id="fileInput">
<p id="fileName"></p>

<script>
  document.getElementById('fileInput').addEventListener('change', function() {
    const file = this.files[0];
    if (file) {
      document.getElementById('fileName').textContent = `已选择：${file.name}`;
    }
  });
</script>

files[0] 是用户选择的第一个文件对象，包含文件名、大小、类型等信息。

完整示例

一个”头像上传”表单：

<form action="/upload" method="post" enctype="multipart/form-data">
  <p>
    <label>选择头像：<br>
      <input type="file" name="avatar" accept="image/png, image/jpeg" required>
    </label>
  </p>
  <p>只支持 PNG 或 JPG 格式</p>
  <p>
    <button type="submit">上传头像</button>
  </p>
</form>

一个”多图上传”：

<form action="/upload" method="post" enctype="multipart/form-data">
  <p>
    <label>选择照片（可多张）：<br>
      <input type="file" name="photos" multiple accept="image/*">
    </label>
  </p>
  <p>
    <button type="submit">批量上传</button>
  </p>
</form>

安全提醒

文件上传是安全重灾区。前端限制只是第一道关卡。

服务器端必须验证：

文件类型（检查 MIME type 和后缀）
文件大小
文件内容（防止伪装攻击）

永远不要信任用户上传的任何东西。