我有一個需要使用檔案上傳圖片的需求,所以我添加了一個小小的 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/*">
當然,這只是在客戶端進行的驗證,當接收到檔案時,您也應該在伺服器端驗證媒體類型。