詳見:https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/file#attr-multiple
使用 type="file"
的 <input>
元素使得用戶可以選擇一個或多個元素以提交表單的方式上傳到服務器上,或者通過 Javascript 的 File API 對文件進行操作。
除了被所有 <input>
元素共享的公共屬性,file
類型的 input 還支持下列屬性:
屬性 | 說明 |
---|---|
accept |
一個或多個 unique file type specifiers 描述允許的文件類型 |
capture |
捕獲圖像或視頻數據的源 |
files |
FileList 列出了已選擇的文件 |
multiple |
布爾值,如果出現,則表示用戶可以選擇多個文件 |
accept
accept (en-US)
屬性是一個字符串,它定義了文件 input 應該接受的文件類型。這個字符串是一個以逗號為分隔的 唯一文件類型說明符 列表。由於給定的文件類型可以用多種方式指定,因此當你需要給定格式的文件時,提供一組完整的類型指定符是非常有用的。
例如,有許多方法可以識別 Microsoft Word 文件,所以接受 Word 文件的站點可以使用一個<input>
:
<input type="file" id="docpicker" accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">
capture
capture (en-US) 屬性是一個字符串,如果 accept (en-US)
屬性指出了 input 是圖片或者視頻類型,則它指定了使用哪個攝像頭去這些數據。值 user
表示應該使用前置攝像頭和/或麥克風。值 environment
表示應該使用后置攝像頭和/或麥克風。如果缺少此屬性,則 user agent 可以自由決定做什么。如果請求的前置模式不可用,則用戶代理可能退回到其首選的默認模式。
capture
以前是一個布爾類型的屬性,如果存在,則請求使用設備的媒體捕獲設備(如:攝像機),而不是請求一個文件輸入。
files
multiple
當指定布爾類型屬性 multiple (en-US), 文件 input 允許用戶選擇多個文件。
唯一文件類型說明符
唯一文件類型說明符是一個字符串,表示在 file
類型的 <input>
元素中用戶可以選擇的文件類型。每個唯一文件類型說明符可以采用下列形式之一:
- 一個以英文句號(".")開頭的合法的不區分大小寫的文件名擴展名。例如:
.jpg
,.pdf
或.doc
。 - 一個不帶擴展名的 MIME 類型字符串。
- 字符串
audio/*
, 表示“任何音頻文件”。 - 字符串
video/*
,表示 “任何視頻文件”。 - 字符串
image/*
,表示 “任何圖片文件”。
accept
屬性的值是一個包含一個或多個(用逗號分隔)這種唯一文件類型說明符的字符串。 例如,一個文件選擇器需要能被表示成一張圖片的內容,包括標准的圖片格式和 PDF 文件,大概是這樣的:
<input type="file" accept="image/*,.pdf">
限制可接受的文件類型
通常,你不希望用戶能夠選擇任意類型的文件;相反,你通常希望它們選擇特定類型的文件。例如,如果你的文件輸入讓用戶上傳個人資料圖片,您可能希望他們選擇 Web 兼容的圖像格式,如 JPEG 或 PNG。
可以用 accept
屬性指定可接受的文件類型,它是一個以逗號間隔的文件擴展名和 MIME 類型列表。一些例子:
accept="image/png"
或accept=".png"
— 接受 PNG 文件。accept="image/png, image/jpeg"
或accept=".png, .jpg, .jpeg"
— 接受 PNG 或 JPEG 文件。accept="image/*"
— 接受帶有一個image/*
MIME 類型的任何文件。(許多移動設備也允許用戶在使用它時用攝像頭拍照。)accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
— 接受 MS Word 文檔之類的任何文件。