Input Type: File – 使用 input 元素在 HTML 表单中选择文件 (inputtitle翻译)

在 HTML 表单中，

input

元素可用于创建各种类型的输入字段，包括文件选择器。

要创建文件选择器，请将

type

属性设置为 “file”。例如：

这将创建一个用于选择单个文件的标准文件选择器。

多文件选择

要允许用户选择多个文件，请将

multiple

属性添加到

input

元素。例如：

这将创建一个允许用户选择多个文件的标准文件选择器。

接受的文件类型

您可以使用

accept

属性来指定文件选择器接受的文件类型。例如，要限制文件类型为仅图像，可以使用以下内容：

您可以使用以下值之一来指定接受的文件类型：

• 
image/

  ：所有图像文件
• 
video/

  ：所有视频文件
• 
audio/

  ：所有音频文件
• 
.png

  ：仅 PNG 图像文件
• 
.jpg,.jpeg

  ：仅 JPEG 图像文件

文件大小限制

您还可以使用

max

属性来限制用户可以选择的单个文件的大小。例如，要将最大文件大小限制为 10MB，可以使用以下内容：


max

属性的值以字节为单位。

获取选定的文件

一旦用户选择了文件，您就可以使用以下方法获取选定的文件：


const files = document.querySelector('input[type="file"]').files;



files

变量将包含一个包含所选文件的文件列表。

处理选定的文件

一旦您获取了选定的文件，您可以使用 JavaScript 或后端语言处理它们。例如，您可以使用以下方法将选定的文件上传到服务器：


const formData = new FormData();formData.append('file', files[0]);fetch('/upload', {method: 'POST',body: formData}).then(response => {// 处理服务器响应}).catch(error => {// 处理错误});


请注意，在处理选定的文件之前，您必须先将它们转换为

FormData

对象。

其他属性

以下是一些其他可能对您有用的属性：

• 
name

  ：为文件选择器指定名称
• 
disabled

  ：禁用文件选择器
• 
webkitdirectory

  ：允许用户选择目录（仅适用于 WebKit 浏览器）
• 
mozdirectory

  ：允许用户选择目录（仅适用于 Mozilla 浏览器）

浏览器支持

所有现代浏览器都支持

input

元素的

type="file"

属性。

结论


input

元素的

type="file"

属性是一个功能强大的工具，允许您在 HTML 表单中创建文件选择器。您可以使用此属性允许用户选择单个或多个文件，并指定接受的文件类型和大小限制。一旦用户选择了文件，您就可以使用 JavaScript 或后端语言处理它们。

节点科技