如何使用 HTML 输入标签选择多个文件?

cssweb developmentfront end technology更新于 2024/3/19 10:20:17

HTML 输入标签是一个强大的工具，允许开发者创建动态网页。输入标签的一个实用功能是能够一次选择多个文件。

HTML 输入标签是创建 Web 表单并允许用户与 Web 应用程序交互的常用元素。输入标签最常见的用例之一是文件选择，用户可以选择一个或多个要上传的文件。

HTML 中的输入标签具有各种属性，允许我们自定义标签的行为。文件选择最常用的属性是值为"file"的"type"属性。此属性告知浏览器该输入元素用于选择文件。

语法

<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">选择要上传的文件:</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>