[HTML5] フォームから画像などのファイルをアップロードする際に選択するファイルの種類を指定する方法

入力フォームを設置して、input type=”file” を使用しファイルをアップロードする場合に、送信できるファイルの種類を指定し選択しやすいようにする方法です。


サーバー上に決してあげないという処理ではないので、必要な場合は別途バリデーションしたほうがよさそうです。

方法は簡単で、input 要素に accept 属性を設定します。

画像ファイルを選択する時の accept 属性

例えば画像のアップロードをしてほしくて、かつ画像形式は何でも許容する場合は以下のように設定します。

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

また、拡張子を指定する場合は以下のようにカンマで区切って設定します。

<input type="file" accept=".jpg,.gif,.png,image/gif,image/jpeg,image/png">

音声ファイルを選択する時の accept 属性

音声ファイルをアップロードしたい場合は以下のように設定します。

<input type="file" accept="audio/*">

動画ファイルを選択する時の accept 属性

動画ファイルをアップロードしたい場合は以下のように設定します。

<input type="file" accept="video/*">

Word ファイルを選択する時の accept 属性

Word のファイルをアップロードしたい場合は以下のように設定します。

<input type="file" accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">

ユーザーが迷いにくい実装をしようと思いました

フォームから画像をアップロードしたいことがあり、PC や iPhone であれば画像の選択をするのがそこまで難しくないと判断していたのですが、アンドロイドからだと画像の選択に迷いそうな感じと教えていただきこの設定をしました。ユーザーが迷わないようにするにもファイルのアップロードがある場合は設定しておいたほうがよい属性ですね。

ちなみに accept 属性を設定してない場合とした場合のスマホでの見え方は以下のようになりました。

iPhone での accept 属性設定時の「ファイルを選択」をタップした時の見え方

iPhone の Safari と Chrome は設定前と設定後で見え方に変化はありませんでした。

Android での accept 属性設定時の「ファイルを選択」をタップした時の見え方

accept 設定後
accept 設定前

Android の Chrome では設定前はやはりちょっと選択が難しい印象で、accept 属性の設定が必須だなと感じました。

Related Article

No Comments & Tracbacks

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー トラブル コードサンプル スライドショー コンテンツ jQueryプラグイン 素材 引っ越し php お知らせ Facebook JavaScript CSS カテゴリー IE 投稿タイプ seo Photoshop Shareボタン HTML5 レスポンシブ サイドバー ナビゲーション タクソノミー WPセキュリティ Git カスタムメニュー Macアプリ PHPリファレンス SVG query_posts API WP使い方 iTunes データベース コメント function RSS 条件分岐 get_posts() スマートフォン Sass/Compass マルチサイト機能