Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[zh-cn] Init translation of html attribute accept #23658

Merged
merged 7 commits into from
Sep 19, 2024
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
155 changes: 155 additions & 0 deletions files/zh-cn/web/html/attributes/accept/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,155 @@
---
title: HTML 属性:accept
slug: Web/HTML/Attributes/accept
l10n:
sourceCommit: 067a40e4ed27ea6e1f3b8bbfec15cd9dc3078f4c
---

{{HTMLSidebar}}

**`accept`** 属性的值是一个以逗号分隔的列表,其中包含一个或多个文件类型,或[唯一文件类型标识符](#唯一文件类型标识符),说明允许的文件类型。
yin1999 marked this conversation as resolved.
Show resolved Hide resolved

{{EmbedInteractiveExample("pages/tabbed/attribute-accept.html", "tabbed-shorter")}}

## 概述

accept 是 {{HTMLElement("input/file", "file")}} {{htmlelement("input")}} 类型的属性。{{htmlelement("form")}} 元素曾经支持这个属性,但已被移除,改用 {{HTMLElement("input/file", "file")}}。

由于一种给定的文件类型可以用多种方式识别,因此在需要特定类型的文件时,提供一套完整的类型说明是非常有用的,或者使用通配符来表示任何格式的类型都是可以接受的。
jasonren0403 marked this conversation as resolved.
Show resolved Hide resolved

例如,有多种方法可以识别 Microsoft Word 文件,因此接受 Word 文件的网站可能会使用像这样的 `<input>`:
jasonren0403 marked this conversation as resolved.
Show resolved Hide resolved

```html
<input
type="file"
id="docpicker"
accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" />
```

而如果接受的是媒体文件,可能希望包含该媒体类型的任何格式:

```html
<input type="file" id="soundFile" accept="audio/*" />
<input type="file" id="videoFile" accept="video/*" />
<input type="file" id="imageFile" accept="image/*" />
```

`accept` 属性并不验证所选文件的类型;它为浏览器提供提示,引导用户选择正确的文件类型。用户仍然有可能(在大多数情况下)在文件选择器中切换一个选项,从而覆盖此选项并选择任何他们想要的文件,然后选择不正确的文件类型。

因此,应确保服务器端验证预期需求。
jasonren0403 marked this conversation as resolved.
Show resolved Hide resolved

## 示例

当设置为文件输入类型时,打开的本地文件选择器只能选择正确文件类型的文件。大多数操作系统会淡化不符合标准的文件,使其无法选择。

```html
<p>
<label for="soundFile">选择一个音频文件:</label>
<input type="file" id="soundFile" accept="audio/*" />
</p>
<p>
<label for="videoFile">选择一个视频文件:</label>
<input type="file" id="videoFile" accept="video/*" />
</p>
<p>
<label for="imageFile">选择一些图像:</label>
<input type="file" id="imageFile" accept="image/*" multiple />
jasonren0403 marked this conversation as resolved.
Show resolved Hide resolved
</p>
```

{{EmbedLiveSample('示例', '100%', 200)}}

请注意,最后一个示例允许你选择多个图像。参见 [`multiple`](/zh-CN/docs/Web/HTML/Element/input#multiple) 属性以了解更多信息。

## 唯一文件类型标识符

**唯一文件类型标识符**是一个字符串,用于描述用户可在 `file` 类型的 {{HTMLElement("input")}} 元素中选择的文件类型。每个唯一文件类型指定符可以是以下形式之一:

- 一个以点号(“.”)字符开头的,大小写不敏感的文件扩展名。如:`.jpg`、`.pdf` 或 `.doc`。
- 一个有效的 MIME 类型字符串,不带扩展名。
- 字符串 `audio/*` 表示“任何音频文件”。
- 字符串 `video/*` 表示“任何视频文件”。
- 字符串 `image/*` 表示“任何图像文件”。

## 使用 file 输入

### 基本示例

```html
<form method="post" enctype="multipart/form-data">
<div>
<label for="file">选择要上传的文件</label>
<input type="file" id="file" name="file" multiple />
</div>
<div>
<button>提交</button>
</div>
</form>
```

```css hidden
div {
margin-bottom: 10px;
}
```

这产生了如下输出:

{{EmbedLiveSample('基本示例', 650, 60)}}

> [!NOTE]
> 你也可以在 GitHub 上找到该示例——查看[源代码](https://github.com/mdn/learning-area/blob/main/html/forms/file-examples/simple-file.html),或尝试[在线运行它](https://mdn.github.io/learning-area/html/forms/file-examples/simple-file.html)。

无论用户使用何种设备或操作系统,file 输入都会提供一个按钮,打开文件选择对话框,让用户选择文件。

如上所示,包含 [`multiple`](/zh-CN/docs/Web/HTML/Element/input#multiple) 属性可指定同时选择多个文件。用户可以根据平台允许的方法(如按下 <kbd>Shift</kbd> 或 <kbd>Control</kbd>,然后单击)从文件选择器中选择多个文件。如果你只想让用户从每个 `<input>` 中选择单个文件,省略 `multiple` 属性。
jasonren0403 marked this conversation as resolved.
Show resolved Hide resolved

### 限制所接受的文件类型

通常情况下,你不希望用户任意选择文件类型,而是希望他们选择特定类型的文件。例如,如果你的 file 输入让用户上传个人资料图片,你可能希望他们选择网络兼容的图片格式,如 {{Glossary("JPEG")}} 或 {{Glossary("PNG")}}。
jasonren0403 marked this conversation as resolved.
Show resolved Hide resolved

可接受的文件类型可通过 [`accept`](/zh-CN/docs/Web/HTML/Element/input/file#accept) 属性指定,该属性使用逗号分隔的列表,列出允许的文件扩展名或 MIME 类型。举例如下:

- `accept="image/png"` 或 `accept=".png"`——接受 PNG 文件
jasonren0403 marked this conversation as resolved.
Show resolved Hide resolved
- `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 文档的东西。

我们来看一个更加完整的例子:

```html
<form method="post" enctype="multipart/form-data">
<div>
<label for="profile_pic">选择要上传的文件</label>
<input
type="file"
id="profile_pic"
name="profile_pic"
accept=".jpg, .jpeg, .png" />
</div>
<div>
<button>提交</button>
</div>
</form>
```

```css hidden
div {
margin-bottom: 10px;
}
```

{{EmbedLiveSample('限制所接受的文件类型', 650, 60)}}

## 规范

{{Specifications}}

## 浏览器兼容性

{{Compat}}

## 参见

- [在 web 应用中使用文件](/zh-CN/docs/Web/API/File_API/Using_files_from_web_applications)
- [File API](/zh-CN/docs/Web/API/File)