ファイルアップロードの参照ボタンの変更設定

ファイル選択ボタンをカスタマイズ

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>

サンプル

最新の記事

プロフィール

流されるままにウェブ業界で仕事しています。
主にLAPP環境でPHPを書いています。
最近はjQueryをよく書いています。