input type=file をいじる

input type=file は、いろいろと不便。
たとえば、
・ボタンにCSSがきいてくれない
・きちんとしたパスになっていないとsubmitできない
なんとかならんかなーと調べてみたところ、良い例を発見。
リンク切れたら悲しいので、要点をメモ。

(1) file(ID=upload)を非表示(style=”display:none”)にする
(2) text(ID=txt)とbuttonを並べておく
(3) fileのonchangeで、textのvalueにfileのvalueをセット
(fileで、onchange=”txt.value = this.value”)
(4) buttonのonclickで、fileをclickする
(buttonで、onclick=”upload.click()”)

こういう方針でやれば、見た目はもちろん、validationいれたり、色々できるなー。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です