input type=”file” を画像ボタンに変更する方法 ファイルアップロードをカスタマイズ

この記事は5年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

どうもこんばんは!

今日は【input type=”file” を画像ボタンに変更する方法】を書きたいと思います。fileアップロードを画像ボタンに差し替え、ユーザビリティを向上させるのが目的です。たまに使いたくなるのでここにメモしておきますね。

通常のファイルアップロードタグ


<input type="file">

通常の状態です。CSSで背景やボーダーを削除するデザイン変更には限界があります。
ですのでjQueryで補完します。

ボタンの準備

ファイルアップロードを画像ボタンに変更

・HTML


<input type="file" id="file_01" class="file">
<label class="file_mask">
<span><!– 画像用spanタグ –></span>
<input type="text" id="mask_file_01">
</label>

・JS(IE9 – 追記参照)
<script type="text/javascript">
$(function(){
$("#file_01").change(function(){
$("#mask_file_01").val($("#file_01").val());
});
$("#mask_file_01").click(function(){
$("#file_01").click();
});
});
</script>

追記
※注)上記の方法はIE8以前のプラウザには対応していません。これはjQueryのtriggerが対応していない為です。回避方法に関してはjQuery – trigger(‘click’) not working in IEをご参照ください。

・JS(IE7,8対応版 – 参照: jQuery – trigger(‘click’) not working in IE

<script type="text/javascript">
$(function(){
$("#file_01").change(function(){
$("#mask_file_01").val($("#file_01").val());
});
$("#mask_file_01").click(function(){
var $elm = $(‘#file_01’);
if (document.createEvent) {
var e = document.createEvent(‘MouseEvents’);
e.initEvent(‘click’, true, true );
$elm.get(0).dispatchEvent(e);
}
else {
$elm.trigger("click");
}
return false;
});
});
</script>

・CSS


#file_01,#mask_file_01{
display:none;
}
.file_mask span{
display:block;
background-image:url(images/btn_upload.png);
background-position:left top;
height:81px;
width:354px;
cursor:pointer;
}
.file_mask span:hover{
background-position:left bottom;
}

以上になります。

DEMO