如何確保您的輸入欄位僅能上傳圖片 | Tech Wiki Online

如何確保您的輸入欄位僅能上傳圖片

我有一個需要使用檔案上傳圖片的需求，所以我添加了一個小小的 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/*">

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

tags: [“image upload”, “file input”, “validation”]