HTML 屬性：accept

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 屬性。

**唯一檔案型別說明符** 是一個字串，描述了使用者可以在 <input> 元素（型別為 file）中選擇的特定檔案型別。每個唯一檔案型別說明符可以採用以下形式之一：

• 以句點（"."）字元開頭的有效不區分大小寫的檔名副檔名。例如：.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>

div {
  margin-bottom: 10px;
}

這將產生以下輸出

無論使用者的裝置或作業系統如何，檔案輸入都提供一個按鈕，開啟一個檔案選擇器對話方塊，允許使用者選擇檔案。

包括 multiple 屬性（如上所示）指定可以一次選擇多個檔案。使用者可以透過任何允許其所選平臺的方式（例如，按住 Shift 或 Control，然後單擊）從檔案選擇器中選擇多個檔案。如果只想讓使用者每次選擇一個檔案，則省略 multiple 屬性。

通常，您不希望使用者能夠選擇任意型別的檔案；相反，您通常希望他們選擇特定型別或型別的檔案。例如，如果您的檔案輸入允許使用者上傳個人資料圖片，您可能希望他們選擇與網路相容的影像格式，例如 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>

div {
  margin-bottom: 10px;
}

• 從 Web 應用程式中使用檔案
• 檔案 API