twitter bootstrapでファイルアップロードボタンを綺麗にする
html
<input class="input-file" id="fileInput" type="file" style="display:none;">
<div class="input-append">
<input class="span2" id="photo-dummy" type="text">
<button class="btn btn-success" onclick="$('input[id=fileInput]').click();" type="button">写真を選択する</button>
</div>
Javascript
$('input[id=fileInput]').change(function(){
$("#photo-dummy").val($(this).val());
});1. html部分、「input type="file"」は「style="display:none;"」で見えなくする
<input class="input-file" id="fileInput" type="file" style="display:none;">
2. 新しくアップロードボタンを作成する(ダミー）
<div class="input-append">
<input class="span2" id="photo-dummy" type="text">
<button class="btn btn-success" onclick="$('input[id=fileInput]').click();" type="button">写真を選択する</button>
</div>3. 作成したアップロードボタン（ダミー）をクリックされたら見えなくした「input type="file"」がクリックされるようにjavascriptを仕込む
onclick="$('input[id=fileInput]').click();"4. 見えなくした「input type="file"」に表示されているファイルパスをjavascriptで取得して作成したアップロードボタン（ダミー）にファイルパスが表示されるようにする
$('input[id=fileInput]').change(function(){
$("#photo-dummy").val($(this).val());
});
- 見えなくした「input type="file"」が変更された場合
- 見えなくした「input type="file"」に表示されたテキスト部分を取得
- 作成したアップロードボタン（ダミー）のテキスト部分に取得したファイルパスを表示させる
