ファイルをアップロードしたいときはブラウザの機能(input)を使うことになるが、その際表示されるボタンを画像ボタンに変える方法。結論から言うと、
- input要素を非表示とし、
- 用意した画像ボタンをclickしたら、プログラムでinput要素をclickする。
ことで実現できる。(起点は画像ボタンでなくても何でも構わない。)
-
ファイルをアップロードできるようにする
HTMLでinput要素のtypeをfileに指定する。
<input type="file" id="inputFileUpload" name="inputFileUpload">
これだけで、次のような画面が表示される。(chromeの例)
ボタンを押すとファイルを選択するダイアログが表示され、選択すると次のような画面になり、アップロードが始まる。
ここまではブラウザの機能で実現され、プログラミングは不要。ファイルを選択すると、(見た目のとおり)ファイル名が表示されるので、このイベントをキャッチしてアップロード後の処理を記述すればよい。
$('#inputFileUpload').live('change',handleFileSelect);
この例では、handleFileSelect()を呼び出している。(結果はevent.target.resultで取り出すことができる。)
ただし、画面に現れるボタンはブラウザが標準で生成しているものなので、カスタマイズの余地はほとんどない。また、ブラウザによっても見た目は結構異なっている。
オリジナルのボタンを非表示にし、別途ボタン(に代わるもの)を用意する
<input type="file" id="inputFileUpload" name="inputFileUpload" style="display:none;"/> <a id="btnUpload" class="easyui-linkbutton" data-options="iconCls:'icon-save'">upload</a>
2行目で作成しているボタン(リンクボタンだが動作には無関係)のイベントハンドラを以下のように定義する。
$('#btnUpload').live('click',function(){
$('#inputFileUpload').click();
});
画像ボタンがクリックされたら、(非表示になっている)アップロードボタンをクリックする。すると、ブラウザがファイル選択ダイアログを表示する。あとは通常と同様で、ユーザがファイルを選択するとブラウザの内容が一部書き換わり(ただし目には見えない)、changeイベントが発生し、最初に用意したイベントハンドラに制御が移り、アップロードしたファイルを処理する。
