jQueryのセレクタ Forms 4

jQuery

jQueryのセレクタ Forms 4

1: :file file タイプのinput要素

2: :hidden hidden タイプのinput要素

3: :hidden display:noneの要素

4: :hidden visiblity:hiddenの要素

Formsセレクタの中から、これまで、 :input、:text、:password、 :radio、:checkbox 、:submit、 :image、:reset :button を紹介してきました。今回は、Formsの最後の2つ :file と :hidden です。

jQueryライブラリ本体の入手方法と、セレクタについてのドキュメントは下記のページにあります。

:file file タイプのinput要素

まず、type属性がfile の要素です。つまり、<input type="file">の要素にマッチするセレクタです。

では、試してみましょう。下記ボタンでファイルを選択してみてください。

ソースは次の通りです。

<div id="test1">
  <form>
    <input type="file" disabled>
  </form>
</div>

<script type="text/javascript">
  jQuery(function($){

    $("form :file","#test1")
      //ボタンを使用可能にします
      .attr("disabled","")
      //選択ファイルが変わったらファイル名を表示
      .change(function(){ 
        alert("選択したファイル \n"+this.value);
      });

  });
</script>

<input type="file" disabled>というふうにdisabled属性を付けてあるので、この要素はこのままでは使用できませんが、 jQuery(function($){ })関数の中で、.attr("disabled","")することで、ページ構築後に使用可能になります。

さらに、選択ファイルが変わったら changeメソッドによって、選択したファイル名をダイアログ表示もしています。

次ページでは、 hidden タイプのinput要素を試します。

「Ajaxを使おう」シリーズの記事一覧へ

記事一覧