input type=”file”で選択できるファイルの拡張子を制限する方法 │ Web備忘録

<input type="file"> でファイルを選択できますが、この時選択できるファイルの種類(拡張子)を制御するには、accept 属性で拡張子もしくはMIMEを設定します。

複数の拡張子を設定もできますし、ワイルドカードを使うこともできます。以下一例です。

<!-- 拡張子 .pdf  -->
<input type="file" accept=".pdf">

<!-- MIME でテキストファイルを指定 -->
<input type="file" accept="text/plain">

<!-- MIMEでワイルドカード指定(画像ファイル) -->
<input type="file" accept="image/*">

<!-- 複数指定(画像もしくはPDF) -->
<input type="file" accept="image/*,.pdf">

<!-- 複数指定(.xlsxしくは.docx) -->
<input type="file" accept=".xlsx,.docx">

ActionView::Helpers::FormBuilder file_field | RailsDoc(β)

# Let's say that @user has avatar:
file_field(:avatar)
# => <input type="file" id="user_avatar" name="user[avatar]" />

# Let's say that @post has image:
file_field(:image, :multiple => true)
# => <input type="file" id="post_image" name="post[image][]" multiple="multiple" />

# Let's say that @post has attached:
file_field(:attached, accept: 'text/html')
# => <input accept="text/html" type="file" id="post_attached" name="post[attached]" />

# Let's say that @post has image:
file_field(:image, accept: 'image/png,image/gif,image/jpeg')
# => <input type="file" id="post_image" name="post[image]" accept="image/png,image/gif,image/jpeg" />

# Let's say that @attachment has file:
file_field(:file, class: 'file_input')
# => <input type="file" id="attachment_file" name="attachment[file]" class="file_input" />