通常のファイルインプットタグは
<input type=’file’ id=’file_up’ enctype=’multipart/form-data’>
こんな感じ。
ｊQueryを使って、ファイル選択時にアップロードさせようとすると、
$(“#file_up”).change(function(){
$(this).upload(
‘/upload’,
‘type=image’,
function (res) {
$(“#preview”).html(“<IMG SRC=’kotei.jpg’>”);
},
‘text’
);
});
みたいに、ボタンのチェンジイベント（選択ファイル名が変化）にバインドして、jQueryのUpload機能でアップするようにするんだけど、ファイル選択とファイル名の表示は、即時アップにはあまりイメージが合わない。
なので、このタグを消して、別のボタンでキックしたい。
<input type=’button’ id=’file_up_btn’ onclick=’document.genElementById(‘file_up’).click();’ value=’アップロード’>
みたいなボタンを作って、こっちのボタンが押されたら、ターゲットのInputタグをキックするという動作をさせる。
aタグで
<a href=’javascript:void();’ onclick=’document.genElementById(‘file_up’).click();”><img src=’button.jpg’></a>
イメージをセット
みたいにすると、画像ボタンを利用することも出来る。
で、本体のタグ表示が邪魔なので消したいんだけど、style=’display:none;’にすると、ボタンを押してもファイル選択ウィンドウが表示されなくなってしまう。
で、常套手段のstyle=’text-indent:-9999px;’にして画面外部に飛ばそうとすると、Chromeでファイル選択ボタンだけ飛んでいって、ファイル名欄が残る上に、本来ボタンがある空白をクリックするとファイル選択が開いてしまう。
じゃあ、どうしようと思ったら、divにstyle=’text-indent:-9999px;’をつけてサンドイッチしてやると隠すことが出来た。 でも、微妙なスペースは残るけど、まぁ、このぐらいで妥協しておこう。
(809)
