文件上傳是網站中一種常見的功能。例如百度網盤、QQ 郵箱以及有道云筆記都可以實現文件的上傳。在 HTML 中，把 <input> 標簽的 type 屬性設置為 file 就可以實現上傳文件的功能，又叫做文件上傳域。具體語法格式如下：

<input type="file" />

接下來我們看一下怎樣才能實現文件的正確上傳呢？具體代碼如下：
純文本復制

<form action="" method="post" enctype="multipart/form-data"><input type="file" name="file" accept="image/png"/><br/><input type="submit"/> </form>

上傳文件時，需要把 method 屬性設置為 post（get 方式不能提交文件）。

上述代碼中，使用了 標簽的 enctype 屬性以及 標簽的 accept 屬性，我們來分別看一下：

1. enctype屬性

enctype 屬性規定被提交數據的編碼。如果提交數據中包含文件時，需要把 <form> 標簽的 enctype 屬性設置為 multipart/form-data。如果不這樣設置，文件將無法正常提交。具體代碼如下：

<form action="" method="post" enctype="multipart/form-data"><input type="file" name="file"/><br/><input type="submit"/> </form>

運行結果如圖所示：

當然僅僅設置<form> 標簽的 enctype 屬性是不夠的，如果要保證文件可以正確提交給表單服務器，還需要設置文件的類型，這時就需要使用 accept 屬性。

2. accept屬性，規定上傳文件的類型

當 <input> 標簽的 type 屬性為 file 時，使用 accept 屬性可以規定上傳文件的類型。具體代碼如下：

<form action="" method="post" enctype="multipart/form-data"><input type="file" name="file" accept="image/png"/> </form>

此處規定上傳的文件只能是.png格式的圖片。如果想上傳.pdf格式的圖片，需要修改 accept 的屬性值。

上傳文件的類型有很多種，我們在文章的末尾會附上常用的文件類型。
如果 accept 的屬性值為多個，它們之間需要用逗號隔開。

根據以上內容，我們總結出上傳文件需要注意的 2 點：

• 把 <form> 標簽的 enctype 屬性設置為 multipart/form-data；
• 使用 <input> 標簽的 accept 屬性來設置上傳文件的類型。

然而這樣編寫代碼只能實現每次上傳一個文件，如果想實現一次上傳多個文件，還要用到 <input> 標簽的 multiple 屬性。

3. multiple屬性，一次上傳多個文件

當給上傳文件字段設置了 multiple 屬性時，就表示可以同時選擇多個文件一起上傳。我們來看具體的代碼：

<form action="" method="post" enctype="multipart/form-data"><input type="file" name="file" accept="image/png" multiple /> </form>

這時我們就可以一次性選擇多個.png格式的圖片文件，如圖所示：

通過運行結果可以發現，當選擇多個文件時，瀏覽器顯示的是文件個數而不再是文件名稱。

4. 常用的文件類型

總結

以上是生活随笔為你收集整理的19、HTML文件上传域的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。