如何使用HTML input标签选择多个文件

HTML input标签是一个强大的工具，允许开发人员创建动态网页。其中一个有用的功能是能够一次选择多个文件。

HTML input标签是创建网页表单和让用户与网页应用程序交互的常用元素之一。其中一个最常见的用例是文件选择，用户可以选择一个或多个要上传的文件。

HTML中的input标签有各种属性，可以让我们自定义标签的行为。文件选择最常用的属性是”value”属性，值为”file”。这个属性告诉浏览器，该input元素用于选择文件。

语法

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

在上面的语法中 –

使用 < input>标签在网页上创建一个用户输入字段。
type 属性指定了输入字段的类型。在这种情况下，我们使用 type=”file” 来创建一个文件上传字段。
name 属性指定文件输入字段的名称。这个名称将在表单提交时用于标识文件输入字段。
multiple 属性指定用户可以选择多个文件进行上传。

创建一个用于文件上传的HTML输入标签

要创建一个HTML输入标签，用于文件上传，允许用户选择多个文件，我们将使用以下HTML代码 −

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

在这个示例中，我们使用“file”类型的属性来创建一个用于文件上传的输入标签。我们还为输入标签指定了一个name属性，这样我们可以在服务器端识别上传的文件。

为输入标签添加标签

在文件输入标签中添加标签是一种好的做法，这样用户就知道应该上传什么类型的文件。以下是如何为文件输入标签添加标签的示例：

<label for="fileUpload">Choose the files to upload:</label>
<input type="file" id="fileUpload" name="files[]" multiple>

在这个示例中，我们使用标签的”for”属性将标签与文件输入标签链接起来。我们还使用输入标签的”id”属性将其与标签匹配。

样式化文件输入字段

文件输入字段的默认外观看起来不够吸引人，可能不适合网站的设计。因此，我们使用CSS来为文件输入字段添加样式。

示例1

这是一个带有多个属性的基本文件输入字段的示例。

<!DOCTYPE html>
<html>
<head>
   <style>
      body{
         text-align:center;
      }
   </style>
</head>
   <body>
      <h3>Basic file input field with multiple attributes</h3>
      <p> You can choose multiple files below
      <form method="post" action="upload.php" enctype="multipart/form-data">
         <label for="fileUpload">Choose files:</label>
         <input type="file" id="fileUpload" name="files[]" multiple>
         <input type="submit" name="submit" value="Submit">
      </form>
   </body>
</html>

示例2

这是另一个带有自定义样式的文件输入字段的示例。

<!DOCTYPE html>
<html>
<head>
   <style>
      body{ text-align:center; }
      .file-upload {
         overflow: hidden;
         display: inline-block;
         background-color: #009688;
         color: #fff;
         padding: 10px 20px;
         border-radius: 5px;
         font-size: 16px;
         cursor: pointer;
      }
      .file-upload input[type=file] {
         position: absolute;
         top: 0;
         right: 0;
         bottom: 0;
         left: 0;
         opacity: 0;
         cursor: pointer;
      }
      .submit-btn{
         display: inline-block;
         background-color: #544000;
         color: #fff;
         padding: 10px;
         width:125px;
         border-radius: 5px;
         font-size: 16px;
         cursor: pointer;
      }
   </style>
</head>
   <body>
      <h3>File input field with custom styling</h3>
      <form method="post" action="upload.php" enctype="multipart/form-data">
         <label class="file-upload"> Choose Files
            <input type="file" name="files[]" multiple>
         </label> <br>
         <input class="submit-btn" type="submit" name="submit" value="Submit">
      </form>
   </body>
</html>