试一试
<label for="movie">Choose a movie to upload:</label>
<input type="file" id="movie" name="movie" accept="video/*" />
<label for="poster">Choose a poster:</label>
<input type="file" id="poster" name="poster" accept="image/png, image/jpeg" />
label {
display: block;
margin-top: 1rem;
}
input {
margin-bottom: 1rem;
}
概述
accept 属性是 file <input> 类型的属性。它曾经支持在 <form> 元素上使用，但已被弃用，改为使用 file。
由于一种文件类型可能以多种方式进行标识，因此，当您需要特定类型的文件时，提供一套完整的类型说明符很有用，或者使用通配符来表示任何格式的类型都可接受。
例如，Microsoft Word 文件可以通过多种方式进行标识，因此，一个接受 Word 文件的网站可能会使用如下的 <input>：
<input
type="file"
id="docpicker"
accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" />
而如果您接受的是媒体文件，您可能希望包含该媒体类型的任何格式：
<input type="file" id="soundFile" accept="audio/*" />
<input type="file" id="videoFile" accept="video/*" />
<input type="file" id="imageFile" accept="image/*" />
accept 属性不会验证所选文件的类型；它为浏览器提供了提示，以引导用户选择正确的文件类型。在大多数情况下，用户仍然可以在文件选择器中切换一个选项，使其能够覆盖此限制并选择任何他们想要的文件，然后选择错误的文件类型。
因此，您应该确保预期的需求在服务器端得到验证。
示例
当应用于文件输入类型时，打开的原生文件选择器应该只允许选择正确文件类型的文件。大多数操作系统会使不符合条件的文件变灰，使其不可选。
<p>
<label for="soundFile">Select an audio file:</label>
<input type="file" id="soundFile" accept="audio/*" />
</p>
<p>
<label for="videoFile">Select a video file:</label>
<input type="file" id="videoFile" accept="video/*" />
</p>
<p>
<label for="imageFile">Select some images:</label>
<input type="file" id="imageFile" accept="image/*" multiple />
</p>
请注意，最后一个示例允许您选择多个图像。有关更多信息，请参阅 multiple 属性。
唯一文件类型说明符
唯一文件类型说明符 是一个字符串，用于描述用户可以在类型为 file 的 <input> 元素中选择的文件类型。每个唯一文件类型说明符可以采用以下形式之一：
- 一个有效的、不区分大小写的扩展名，以句点（“.”）字符开头。例如：
.jpg、.pdf或.doc。 - 一个有效的 MIME 类型字符串，不带扩展名。
- 字符串
audio/*，表示“任何音频文件”。 - 字符串
video/*，表示“任何视频文件”。 - 字符串
image/*，表示“任何图像文件”。
accept 属性的值是一个字符串，其中包含一个或多个这些唯一文件类型说明符，用逗号分隔。例如，一个需要可以呈现为图像的内容的文件选择器，包括标准图像格式和 PDF 文件，可能如下所示：
<input type="file" accept="image/*,.pdf" />
使用文件输入
一个基本示例
<form method="post" enctype="multipart/form-data">
<div>
<label for="file">Choose file to upload</label>
<input type="file" id="file" name="file" multiple />
</div>
<div>
<button>Submit</button>
</div>
</form>
这将产生以下输出：
无论用户的设备或操作系统如何，文件输入都会提供一个按钮，该按钮会打开一个文件选择器对话框，允许用户选择一个文件。
包含 multiple 属性（如上所示）指定一次可以选择多个文件。用户可以通过其选择的平台允许的任何方式（例如，按住 Shift 或 Control，然后单击）在文件选择器中选择多个文件。如果您只希望用户为每个 <input> 选择一个文件，请省略 multiple 属性。
限制可接受的文件类型
通常您不希望用户能够选择任何任意类型的文件；相反，您通常希望他们选择特定类型或类型的文件的。例如，如果您的文件输入允许用户上传个人资料图片，您很可能希望他们选择 Web 兼容的图像格式，如 JPEG 或 PNG。
可接受的文件类型可以用 accept 属性指定，该属性接受一个逗号分隔的允许文件扩展名或 MIME 类型的列表。一些示例：
accept="image/png"或accept=".png"— 接受 PNG 文件。accept="image/png, image/jpeg"或accept=".png, .jpg, .jpeg"— 接受 PNG 或 JPEG 文件。accept="image/*"— 接受任何具有image/*MIME 类型的文件。（许多移动设备在使用此选项时，还允许用户使用相机拍照。）accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"— 接受任何看起来像 MS Word 文档的文件。
让我们看一个更完整的例子：
<form method="post" enctype="multipart/form-data">
<div>
<label for="profile_pic">Choose file to upload</label>
<input
type="file"
id="profile_pic"
name="profile_pic"
accept=".jpg, .jpeg, .png" />
</div>
<div>
<button>Submit</button>
</div>
</form>
规范
| 规范 |
|---|
| HTML # attr-input-accept |
浏览器兼容性
加载中…