11.1 元素 <input type="file">
Web 应用程序经常需要用户上传文件到服务器。这对于上传文档、图片、视频和其他数据类型非常有用。HTML 提供了一个 <input type="file"> 元素来创建文件上传界面。下面我们将详细介绍这个元素的使用及其属性，如 multiple 和 accept。
元素 <input type="file"> 创建一个界面元素，允许用户从设备中选择文件并上传到服务器。这是 HTML 表单中的一个关键元素，它允许在 web 应用程序中集成文件上传功能。
<input type="file"> 元素的主要属性
type="file"— 确定该元素用于选择文件。name— 设置元素的名称，以在向服务器发送表单数据时使用。multiple— 允许用户同时选择多个文件。accept— 指定可以选择的文件类型，使用 MIME 类型或文件扩展名。
<input type="file"> 元素的使用示例
简单示例
一个不带附加属性的文件上传元素的最简单示例：
<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 允许用户选择多个文件进行上传。当添加此属性时，用户可以在文件选择对话框中选择多个文件。
使用示例：
<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 限制用户可以选择的文件类型。这对于确保用户只上传允许的文件类型（例如仅图片或文档）非常有用。
使用示例：
<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。
图片预览示例：
<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>
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>标签中显示它
GO TO FULL VERSION