我有一個需要使用檔案上傳圖片的需求,所以我添加了一個小小的 input type="file" 欄位:

<input type="file">

我只希望使用者能夠上傳圖片。

這是一個常見的需求,但我總是忘記如何實現。

使用 accept 屬性,將 image/* 傳遞進去以允許上傳所有圖片:

<input type="file" accept="image/*">

或者使用 image/png 只允許上傳 PNG 圖片:

<input type="file" accept="image/png">

同樣的語法也可以用於只允許上傳視頻:

<input type="file" accept="video/*">

或者音頻:

<input type="file" accept="audio/*">

或者它們的組合:

<input type="file" accept="image/*,audio/*,video/*">

當然,這只是在客戶端進行的驗證,當接收到檔案時,您也應該在伺服器端驗證媒體類型。