ファイルアップロードの参照ボタンの変更設定
ファイル選択ボタンをカスタマイズ
jQuery
$(function() {
// 参照ボタン押下時のトリガー
$('input[type=button]').click(function() {
$('input[type=file]').trigger('click');
});
// アップロードするファイルを選択
$('input[type=file]').change(function() {
var file_name = $(this).val();
$('input[type=button]').after('<span></span>');
$('span').html(file_name);
});
});
CSS
input[type=file] {
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
opacity: 0;
}
HTML
<form enctype="multipart/form-data" method="post">
<input type="file" name="userfile">
<input type="button" value="ファイルを選択してください">
</form>
サンプル
