試一試
<label for="movie">Choose a movie to upload:</label>
<input type="file" id="movie" name="movie" accept="video/*" />
<label for="poster">Choose a poster:</label>
<input type="file" id="poster" name="poster" accept="image/png, image/jpeg" />
label {
display: block;
margin-top: 1rem;
}
input {
margin-bottom: 1rem;
}
概述
accept 屬性是 file <input> 型別的屬性。它曾經支援在 <form> 元素上使用，但已被棄用，改為使用 file。
由於一種檔案型別可能以多種方式進行標識，因此，當您需要特定型別的檔案時，提供一套完整的型別說明符很有用，或者使用萬用字元來表示任何格式的型別都可接受。
例如，Microsoft Word 檔案可以透過多種方式進行標識，因此，一個接受 Word 檔案的網站可能會使用如下的 <input>：
<input
type="file"
id="docpicker"
accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" />
而如果您接受的是媒體檔案，您可能希望包含該媒體型別的任何格式：
<input type="file" id="soundFile" accept="audio/*" />
<input type="file" id="videoFile" accept="video/*" />
<input type="file" id="imageFile" accept="image/*" />
accept 屬性不會驗證所選檔案的型別；它為瀏覽器提供了提示，以引導使用者選擇正確的檔案型別。在大多數情況下，使用者仍然可以在檔案選擇器中切換一個選項，使其能夠覆蓋此限制並選擇任何他們想要的檔案，然後選擇錯誤的檔案型別。
因此，您應該確保預期的需求在伺服器端得到驗證。
示例
當應用於檔案輸入型別時，開啟的原生檔案選擇器應該只允許選擇正確檔案型別的檔案。大多數作業系統會使不符合條件的檔案變灰，使其不可選。
<p>
<label for="soundFile">Select an audio file:</label>
<input type="file" id="soundFile" accept="audio/*" />
</p>
<p>
<label for="videoFile">Select a video file:</label>
<input type="file" id="videoFile" accept="video/*" />
</p>
<p>
<label for="imageFile">Select some images:</label>
<input type="file" id="imageFile" accept="image/*" multiple />
</p>
請注意，最後一個示例允許您選擇多個影像。有關更多資訊，請參閱 multiple 屬性。
唯一檔案型別說明符
唯一檔案型別說明符 是一個字串，用於描述使用者可以在型別為 file 的 <input> 元素中選擇的檔案型別。每個唯一檔案型別說明符可以採用以下形式之一：
- 一個有效的、不區分大小寫的副檔名，以句點（“.”）字元開頭。例如：
.jpg、.pdf或.doc。 - 一個有效的 MIME 型別字串，不帶副檔名。
- 字串
audio/*，表示“任何音訊檔案”。 - 字串
video/*，表示“任何影片檔案”。 - 字串
image/*，表示“任何影像檔案”。
accept 屬性的值是一個字串，其中包含一個或多個這些唯一檔案型別說明符，用逗號分隔。例如，一個需要可以呈現為影像的內容的檔案選擇器，包括標準影像格式和 PDF 檔案，可能如下所示：
<input type="file" accept="image/*,.pdf" />
使用檔案輸入
一個基本示例
<form method="post" enctype="multipart/form-data">
<div>
<label for="file">Choose file to upload</label>
<input type="file" id="file" name="file" multiple />
</div>
<div>
<button>Submit</button>
</div>
</form>
這將產生以下輸出：
無論使用者的裝置或作業系統如何，檔案輸入都會提供一個按鈕，該按鈕會開啟一個檔案選擇器對話方塊，允許使用者選擇一個檔案。
包含 multiple 屬性（如上所示）指定一次可以選擇多個檔案。使用者可以透過其選擇的平臺允許的任何方式（例如，按住 Shift 或 Control，然後單擊）在檔案選擇器中選擇多個檔案。如果您只希望使用者為每個 <input> 選擇一個檔案，請省略 multiple 屬性。
限制可接受的檔案型別
通常您不希望使用者能夠選擇任何任意型別的檔案；相反，您通常希望他們選擇特定型別或型別的檔案的。例如，如果您的檔案輸入允許使用者上傳個人資料圖片，您很可能希望他們選擇 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 文件的檔案。
讓我們看一個更完整的例子：
<form method="post" enctype="multipart/form-data">
<div>
<label for="profile_pic">Choose file to upload</label>
<input
type="file"
id="profile_pic"
name="profile_pic"
accept=".jpg, .jpeg, .png" />
</div>
<div>
<button>Submit</button>
</div>
</form>
規範
| 規範 |
|---|
| HTML # attr-input-accept |
瀏覽器相容性
載入中…