時々社内ニートのメモ 目指せ非プログラマー

案件がない時は社内ニートなだけだよ (もう何でもごじゃれ c, c++, c#, VB, java, php, javascript, sql, html, css 他)

javascriptでinput type="file"を実行 input type="file"を画像ボタンにする

いろんなサイトで<input type="file" />を画像ボタンにしようと試行錯誤されていました。

 

多かったのは、CSSで画像の上に<input type="file" />を置き、それを透明にするという方法。

 

確かに出来る。けど、面倒だし、画像にマウスイベント

(例えば、$('画像').hover()だとか)

を入れたい時に前面にあるinputが邪魔!

 

ってことで、この方法よりスマートに出来る方法を考えてみました。

 

は!

画像クリックされた時にinputクリックすればいいんじゃね?

 

ってこでやってみたら出来た。

ちなみにjQuery使ってます。

 

html

<input id="image-select" type="file" />
<img id="form-image" src="url" />

 

CSS

#image-select{ display: none; }

 

javascript

$('#form-image').bind("click touchend", function(){
  $('#image-select').click();
});

 

デモ(画像をクリックしてみてね)

 

 

できた!かんたんだな。