Help us understand the problem. What is going on with this article?

input type="file" のボタンをオリジナルのボタンにする。

More than 5 years have passed since last update.

概要

Bootstrapを使うとボタン類は綺麗に装飾されますが、ファイル選択のボタンってCSSでは装飾出来ません。
そこでjqueryを使えば擬似的に好きな画像やbutton要素をファイル選択ボタン代わりに使うことが出来るようになります。

なお、jqueryを使用しているのでjqueryは読み込んでいる前提です。

ソース

HTML
<input type="file" id="file" style="display:none;" onchange="$('#fake_input_file').val($(this).val())">
<input type="button" value="ファイル選択" onClick="$('#file').click();">
<input id="fake_input_file" readonly type="text" value=""  onClick="$('#file').click();">
<input type="submit" name="submit" value="送信" id="Submit">

解説

HTML1
<input type="file" id="file" style="display:none;" onchange="$('#fake_input_file').val($(this).val())">

この部分が本来のファイル選択ボタンになります。ここを非表示にします。
display:noneは非表示になっているだけで機能を無効化してるわけではありません。

HTML2
<input type="button" value="ファイル選択" onClick="$('#file').click();">

ここが擬似的にファイル選択ボタンの役目を果たしている部分。
ここではわかりやすいようにinputを使ってますが、imgで好きな画像を表示させてもbuttonタグを使ってもOKです。

onClick="$('#file').click();" ここがポイント。
この要素をクリックした時に、非表示にしているHTML1に対してclickイベントを発生させています。
つまり、ここをクリックすればHTML1のボタンもクリックしたことになり、ファイル選択のダイアログが表示されるようになります。

ただ、これだけだとどのファイルを選択したのかがわからないのでファイル名を表示させるためのテキストボックスを用意します。

HTML3
<input id="fake_input_file" readonly type="text" value=""  onClick="$('#file').click();">

readonly属性を付けてユーザーが変更出来ないようにします。
HTML1onchangeによって、この値が変化した際にHTML3のvalue部分が変更されるようにしました。

HTML3onclickのところはHTML2と同じで、テキストボックスをクリックした時もファイル選択のダイアログを表示させるようにしました。

これでHTML2の部分をCSSで装飾してあげればオリジナルボタンの完成です。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away