memocarilog

入力フォームを設置して、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 属性設定時の「ファイルを選択」をタップした時の見え方

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