質問

html でファイルアップロードを実装するのは非常に簡単ですが、accept 属性があることに気づきました。 <input type="file" ...> タグを使用します。

この属性は、ファイルアップロードを画像などに限定する方法として有用でしょうか？また、どのような使い方をすればよいのでしょうか？

あるいは、htmlファイル入力タグのファイルダイアログで、できればファイルタイプを制限する方法はないでしょうか？

解決方法は？

その accept 属性は非常に便利です。これは、ブラウザに対して、現在の input . これは通常、ユーザーによって上書きすることができますが、デフォルトではユーザーの検索結果を絞り込むのに役立ち、ユーザーは100種類ものファイルタイプをふるいにかけることなく、探しているものを正確に入手することができるようになります。

使用方法

注意 これらの例は、現在の仕様に基づいて書かれており、実際にはすべての（あるいはすべての）ブラウザで動作するとは限りません。また、将来的に仕様が変更される可能性もあり、その場合はこれらの例が壊れる可能性があります。

h1 { font-size: 1em; margin:1em 0; }
h1 ~ h1 { border-top: 1px solid #ccc; padding-top: 1em; }

<h1>Match all image files (image/*)</h1>
<p><label>image/* <input type="file" accept="image/*"></label></p>

<h1>Match all video files (video/*)</h1>
<p><label>video/* <input type="file" accept="video/*"></label></p>

<h1>Match all audio files (audio/*)</h1>
<p><label>audio/* <input type="file" accept="audio/*"></label></p>

<h1>Match all image files (image/*) and files with the extension ".someext"</h1>
<p><label>.someext,image/* <input type="file" accept=".someext,image/*"></label></p>

<h1>Match all image files (image/*) and video files (video/*)</h1>
<p><label>image/*,video/* <input type="file" accept="image/*,video/*"></label></p>

HTML仕様書より( ソース )

は accept 属性を指定することで、ユーザーエージェントに どのような種類のファイルが受け入れられるかを示すヒントが得られます。

指定する場合、この属性は カンマで区切られたトークンのセット , である必要があります。 ASCIIの大文字・小文字を区別しない のいずれかにマッチする。

文字列 audio/*

• サウンドファイルを受け付けることを示す。

文字列 video/*

• 動画ファイルを受け付けることを示す。

文字列 image/*

• 画像ファイルを受け付けることを示す。

A パラメータを持たない有効なMIMEタイプ

• 指定されたタイプのファイルを受け入れることを示す。

最初の文字がU+002E FULL STOP文字(.)である文字列

• 指定されたファイル拡張子を持つファイルを受け付けることを示す。