文件上传

可用

11.1 元素 <input type="file">

Web 应用程序经常需要用户上传文件到服务器。这对于上传文档、图片、视频和其他数据类型非常有用。HTML 提供了一个 <input type="file"> 元素来创建文件上传界面。下面我们将详细介绍这个元素的使用及其属性,如 multipleaccept

元素 <input type="file"> 创建一个界面元素,允许用户从设备中选择文件并上传到服务器。这是 HTML 表单中的一个关键元素,它允许在 web 应用程序中集成文件上传功能。

<input type="file"> 元素的主要属性

  1. type="file" — 确定该元素用于选择文件。
  2. name — 设置元素的名称,以在向服务器发送表单数据时使用。
  3. multiple — 允许用户同时选择多个文件。
  4. accept — 指定可以选择的文件类型,使用 MIME 类型或文件扩展名。

<input type="file"> 元素的使用示例

简单示例

一个不带附加属性的文件上传元素的最简单示例:

HTML
<form action="/upload" method="post" enctype="multipart/form-data">
  <label for="file">选择文件:</label>
  <input type="file" id="file" name="file">
  <button type="submit">上传</button>
</form>

11.2 multiple 属性

元素 <input type="file"> 支持多个属性来扩展其功能。我们来看两个:multiple 和 accept。

属性 multiple 允许用户选择多个文件进行上传。当添加此属性时,用户可以在文件选择对话框中选择多个文件。

使用示例:

HTML
<form action="/upload" method="post" enctype="multipart/form-data">
  <label for="files">选择文件:</label>
  <input type="file" id="files" name="files" multiple>
  <button type="submit">上传</button>
</form>
这很有用

在文件选择对话框中,用户可以按住 Ctrl (在 Mac 上为 Cmd) 或 Shift 同时选择和上传多个文件。

11.3 accept 属性

属性 accept 限制用户可以选择的文件类型。这对于确保用户只上传允许的文件类型(例如仅图片或文档)非常有用。

使用示例:

HTML
<form action="/upload" method="post" enctype="multipart/form-data">
  <label for="image">选择图片:</label>
  <input type="file" id="image" name="image" accept="image/*">
  <button type="submit">上传</button>
</form>

属性 accept 限制用户可以选择的文件类型。可以按 MIME 类型或文件扩展名进行限制。在上面的示例中,用户只能选择图片文件。

accept 属性值的示例

按文件类型限制:

  • accept="image/*": 任何图片
  • accept="video/*": 任何视频文件
  • accept="audio/*": 任何音频文件

按文件扩展名限制:

  • accept=".jpg/.jpeg/.png": 仅 JPEG 和 PNG 格式的图片
  • accept=".pdf/.doc/.docx": 仅 PDF 和 Word 文档

11.4 客户端文件处理

有时需要在将文件发送到服务器之前在客户端对其进行预处理。例如,可以显示图片的预览或检查文件大小。这需要使用 JavaScript。

图片预览示例:

HTML
<form action="/upload" method="post" enctype="multipart/form-data">
  <label for="image">选择图片:</label>
  <input type="file" id="image" name="image" accept="image/*">
  <div id="preview"></div>
  <button type="submit">上传</button>
</form>
JavaScript
document.getElementById('image').addEventListener('change', function(event) {
  const preview = document.getElementById('preview');
  preview.innerHTML = '';

  const files = event.target.files;

  for (let i = 0; i < files.length; i++) {
    const file = files[i];
    const reader = new FileReader();

    reader.onload = function(e) {
      const img = document.createElement('img');
      img.src = e.target.result;
      img.style.maxWidth = '200px';
      preview.appendChild(img);
    }
    reader.readAsDataURL(file);
  }
});

解释

  • FileReader: 用于在客户端读取文件内容
  • reader.onload: 当文件完全读取时触发的事件
  • reader.readAsDataURL(file): 方法读取文件并将其编码为 Data URL,这允许在 <img> 标签中显示它
1
任务
Frontend SELF ZH,  第 9 级课程 5
已锁定
文件上传
文件上传
1
任务
Frontend SELF ZH,  第 9 级课程 5
已锁定
上传图片
上传图片
评论
  • 受欢迎
你必须先登录才能发表评论
此页面还没有任何评论