如何在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>

正如我們在輸出中看到的,我們選擇了四個檔案進行上傳。

更新於:2022年11月21日

18K+ 次瀏覽

啟動您的職業生涯

完成課程獲得認證

開始學習
廣告
© . All rights reserved.