実は accept という属性があります. これに MIME Type を指定すればそれに絞ってファイルを選択することができます.

Demo

それぞれ, 左側に書いてあるタイプのファイルしか指定できないようになっています.

Code

<div>  
  <label>default : </label>
  <input type='file' />
</div>  
<div>  
  <label>image : </label>
  <input type='file' accept='image/*' />
</div>  
<div>  
  <label>audio : </label>
  <input type='file' accept='audio/*' />
</div>  
<div>  
  <label>video : </label>
  <input type='file' accept='video/*' />
</div>  

Usage

input[type="file"] に対して accept 属性を指定することで 指定出来るファイルのタイプを絞ることができます.

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

下記の値を指定できます.

• image/* ... 画像系ファイル全般(.png や .jpg など)
• audio/* ... オーディオ系ファイル全般(.mp3 や .ogg など)
• video/* ... ビデオ系ファイル全般(.mp4 や .mov など)
• 拡張子指定 ... .png や .ogg といった直接拡張子を指定して絞り込むこともできます
• Media Type 指定 ... image/png や txt/html といった Media Type で絞り込むこともできます

また複数指定したい場合は, カンマ区切りで指定します.

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

Reference

• HTML input accept Attribute
• [jQuery] input type=”file”で選択するファイルを画像のみに制限する方法 – 零弐壱蜂