元素type="file"让用户选择一个或多个文件，通过表单提交上传到服务器，或者通过 JavaScript 使用File API进行操作。

代码语言：javascript代码运行次数：0复制值

表示所选文件路径的DOMString。

活动

改变和输入

支持的通用属性

接受，多重，必需

IDL属性

文件和价值

方法

选择（）

值“文件输入” value属性包含一个DOMString表示所选文件的路径。

注意：

如果选择多个文件，则该字符串表示第一个选定的文件。JavaScript 可以通过输入的访问其他文件FileList属性（https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications#Getting_information_about_selected_file（S 29％）。如果尚未选择文件，则该字符串为""（空）。该字符串前缀C:\fakepath\为了防止恶意软件猜测用户的文件结构。使用文件输入一个基本的例子代码语言：javascript代码运行次数：0复制

注意：你也可以在 GitHub 上找到这个例子 - 查看源代码，也可以看到它在线运行。

无论用户的设备或操作系统如何，文件输入都会提供一个按钮，用于打开允许用户选择文件的文件选择器对话框。

multiple如上所示，包含属性指定可以一次选择多个文件。用户可以用他们选择的平台允许的任何方式从文件选择器中选择多个文件（例如按住Shift或Control，然后单击）。如果您只希望用户每次选择一个文件，则省略该multiple属性。

提交示例时，每个选定文件的名称将按以下方式添加到 URL 参数中： ?file=file1.txt&file=file2.txt

获取有关选定文件的信息所选文件'由元素的HTMLInputElement.files属性返回 - 返回一个FileList包含File对象列表的对象。该FileList像一个数组的行为，所以你可以检查其length属性来获取选定文件的数量。

每个File对象都包含以下信息：

name：文件名称。lastModified：表示文件上次修改日期的数字，作为 UNIX 时间戳记。lastModifiedDate：Date表示文件上次修改日期和时间的对象。size：代表文件大小的数字（以字节为单位）。type：DOMString表示文件的MIME类型。注意：您可以设置以及HTMLInputElement.files在所有现代浏览器中获得它的价值- 这是最新版本添加到

Firefox 的版本57（见错误1384030）。

限制接受的文件类型通常你不会想要任何类型的文件。例如，如果您的文件输入允许用户上传个人资料图片，那么您可能希望他们选择与网络兼容的图片格式，例如 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 文档的东西。让我们看起来像一个更完整的例子：

代码语言：javascript代码运行次数：0复制

注意：你也可以在 GitHub 上找到这个例子 - 查看源代码，也可以看到它在线运行。

它可能看起来很相似，但如果您尝试选择带有此输入的文件，则会看到文件选取器只允许您选择accept值中指定的文件类型（确切性质因浏览器和操作系统而异）。

accept属性不会验证所选文件的类型 - 它为浏览器提供了一些提示，以指导用户选择正确的文件类型。用户仍然可以（在大多数情况下）在文件选择器中切换选项，以使所有文件可选，然后选择不正确的文件类型。

因此，请确保该accept属性由适当的服务器端验证进行备份。

例子在这个例子中，我们将展示一个稍微更高级的文件选择器，它利用了该HTMLInputElement.files属性中可用的文件信息，并展示了一些聪明的技巧。

注意：你可以在 GitHub - file-example.html上看到这个例子的完整源代码（也可以参考它）。我们不会解释 CSS ; JavaScript 是主要焦点。

首先，让我们看看 HTML：

代码语言：javascript代码运行次数：0复制

接下来，我们来看看 JavaScript 。

在脚本的第一行中，我们获得对表单输入本身的引用，以及