如何在 HTML 表单中允许上传多个文件。

在本文中，我们将学习如何在 HTML 表单中允许上传多个文件。

我们使用 `multiple` 属性来允许在 HTML 表单中上传多个文件。`multiple` 属性适用于电子邮件和文件输入类型。

如果您想允许用户将文件上传到您的网站，您需要使用文件上传框，也称为文件选择框。这是使用 `` 元素创建的，并且 `type` 属性设置为 `file`。

语法

以下是用于在 HTML 表单中选择多个文件上传的语法。

<input type="file" name="name" multiple>

示例（使用 `multiple` 属性）

以下是用于在 HTML 表单中选择多个文件上传的示例程序。

<!DOCTYPE html>
<html>
<head>
   <title>Upload multiple files</title>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
   <form>
      <input type="file" name="name" multiple><br><br>
      <br>
      <input type="submit" value="Submit">
   </form>
</body>
</html>

以下是上述示例程序的输出，其中输入字段中未选择任何文件。

我们只在输入字段中选择了一个文件。以下是显示我们所选文件的输出。

我们也可以选择任意多个文件。以下输出显示了我们选择的 文件数量。

使用具有多个文件值的“multiple”属性

以下语法与上述语法相同。我们将 `multiple` 属性分配给 `multiple` 的值，以便在输入字段中选择多个文件。

语法

以下是用于在 HTML 表单中选择多个文件上传的语法。

<input type="file" name="name" multiple=>

示例

以下是用于在 HTML 表单中选择多个文件上传的示例程序。

<!DOCTYPE html>
<html>
<head>
   <title>Upload multiple files</title>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
   <form>
      <input type="file" name="name" multiple="multiple"><br><br>
      <br>
      <input type="submit" value="Submit">
   </form>
</body>
</html>

正如我们在输出中看到的，我们选择了四个文件进行上传。

更新于: 2022年11月21日

18K+ 浏览量

启动你的 职业生涯

通过完成课程获得认证

开始
广告