input type=”file” を画像ボタンに変更する方法 ファイルアップロードをカスタマイズ
この記事は年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。
どうもこんばんは!
今日は【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;
}
以上になります。