フォームタグにアップロードファイルの拡張子設定

フォームタグにアップロードファイルの拡張子設定

<form method="post" enctype="multipart/form-data">
  <input type="file" name="avatar">
  <button type="submit">送信する</button>
</form>

accept属性では、受け付けるファイルの拡張子や種類を指定できます。

複数指定するときは半角カンマ（,）で区切って並べます。

<input type="file" name="example" accept=".png, .jpg, .jpeg, .pdf, .doc">  

MIMEタイプでの指定してもOK

「MIMEタイプ」とは、ブラウザとサーバー間のやり取りで使われるファイル種類を表す情報のことです。

たとえばPNG画像をMIMEタイプで表すとimage/pngとなります。

拡張子.jpgと.jpegはimage/jpegという1つのMIMEタイプでまとめられます。使用可能一覧はこのURLで見てください。

次の2つは同じ意味になります。
accept=".png, .jpeg, .jpg"
accept="image/png, image/jpeg"
画像ファイル全般を許可する場合
<input type="file" name="example" accept="image/*">  
----------------------------------------------------------
multiple属性：複数ファイルを選択可能にする
<input type="file" name="example" accept="image/*" multiple>
----------------------------------------------------------
required属性：ファイルの選択を必須にする
<form>
  <input type="file" name="avatar" required>
  <button type="submit">送信する</button>
</form>