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

htmlweb developmentfront end technology更新于 2024/7/4 7:08:17

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

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

如果您想允许用户将文件上传到您的网站，您需要使用文件上传框(也称为文件选择框)。它是使用 <input> 元素创建的，并将属性类型设置为 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"属性分配多个值，以便在输入字段中选择多个文件。

语法

以下是在 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>