資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 HTML 輸入標籤選擇多個檔案？
HTML 輸入標籤是一個強大的工具，允許開發人員建立動態網頁。輸入標籤的一個有用功能是可以一次選擇多個檔案。
HTML 輸入標籤是用於建立網頁表單和使使用者能夠與 Web 應用程式互動的常用元素。輸入標籤最常見的用例之一是檔案選擇，使用者可以選擇一個或多個要上傳的檔案。
HTML 中的輸入標籤具有各種屬性，允許我們自定義標籤的行為。用於檔案選擇的常用屬性是“type”屬性，其值為“file”。此屬性告訴瀏覽器輸入元素用於選擇檔案。
語法
<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>
在此示例中，我們使用 label 標籤的“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>
結論
在本文中，我們討論瞭如何使用 HTML 輸入標籤選擇多個檔案。透過向輸入標籤新增 multiple 屬性，使用者可以選擇多個檔案進行上傳。我們還展示瞭如何設定檔案輸入欄位的樣式。使用這些技術，您可以為 Web 應用程式建立使用者友好的檔案上傳功能。
2K+ 次檢視
