如何在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>
正如我們在輸出中看到的,我們選擇了四個檔案進行上傳。
廣告
資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP