まだあった input要素

  • 投稿日:
  • by
  • カテゴリ:
  • ハッシュタグ:

今週末は世間様と同じく三連休ですが、あいにくの雨です。 鈴鹿も大雨みたいですね。
まあ、どのみち晴れていても、家に籠ってプログラミングしてるんですが。

懸案だったチェックボックスを片付けて、ようやく本来の機能開発に向き合っていたら、まだありましたよ。 デザインが行き届いていない要素が。

それはファイル入力のための file属性の input要素(<input type="file" />)です。
見た目は text属性と submit属性のinput要素の組み合わせみたいなんですが、これ専用にスタイルを当てないと、ひどい有様です。

input_file01.jpg

で、困った時の filament group 。 探してみるとありましたよ。 使えそうなのが。

残念ながら jQuery.fileinput.js は ThemeRoller 対応ではありませんが、コメント欄にもあるように、jQuery UI のクラスを追記することで、ThemeRoller の配色を反映させることができます。

メッセージを日本語化したり、ファイルの種類を示すアイコン表示を廃止したり、かなり改変を加えましたが、なんとか形になりました。

input_file02.jpg

hover でハイライトしてますが、カーソルが指先形状に変化してくれないんですよね。 ちゃんとスタイル指定してるんですけど。

ところで、 file属性の input要素って JSから内容をクリアすることができないんですね(できない訳ではないようですが)。

リセットボタン(reset属性の input要素)からは可能ということなのでおとなしく配置しましたが、リセットボタンが押されたら ファイル名の表示窓の内容が初期値に戻るように、jQuery.fileinput.js に改変を加える必要がありました。

セレクトボックスチェックボックスと同様に、このファイル入力も、jQuery UI に標準で含めてほしいですね。

蛇足ですが、アップロードしたファイルをPHPで扱う方法については、PHPのマニュアルを参照するといいです。