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

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

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

如果您想允许用户将文件上传到您的网站，您需要使用文件上传框，也称为文件选择框。这是使用``元素创建的，并且属性类型设置为 `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+ 次浏览

启动您的职业生涯

完成课程获得认证

开始学习
广告