ファイルがjavascriptで選択されたかどうかを追跡するには？

Question

だから私は、入力フィールドを使用している場合：

<input type="file" name="file" id="file" /> 

私はそれをクリックしてファイルを選択して、私はOpenを押したときに、私は、フォームを送信して<input>によって追加]ボタンをクリックせずにファイルをアップロードしたいと思います。

Answer 1

goreSplatterは以下の点を指摘しているため、この動作がユーザーエクスペリエンスの面で驚くべきものではないことに注意してください。例えば、GMailのような電子メールにファイルを添付するものでこれを行うのは完全に有効かもしれません。しかし、ユーザーがそれらの添付ファイルなどを取り消す機会を持っていない限り、事物が確定する前に、あなたはUXの穴から落ちているかもしれません。しかし、私はあなたがすでにUXの側面を試して、おそらく愚かなことをしていないと思います。 :-)

質問に答える：あなたは、例えば、onchange=または（IE上またはattachEvent）addEventListenerを経由してDOM2相当をchangeイベントハンドラを使用してこれを行うことができます。

例（live copy）：

hookEvent(document.getElementById('fileInput'), 
      'change', 
      inputChanged); 

function inputChanged() { 
    display("The input's value changed"); 
} 

... hookEventは、（1例については、以下のリンクを参照してイベントハンドラをフックのためのあなたのユーティリティ関数ですが、それが最適化されていない、あなたはライブラリを使用する場合jQuery,Prototype,YUI,Closureまたはのように、これらのイベントにはブラウザ間でイベントをフックする方法があります）。

上記のリンク先の例は、Chrome、Firefox、Opera for Windows、IE6、IE7で動作しますので、全体的にサポートされる可能性は非常に高いです。