web-dev-qa-db-ja.com

入力type = "file"のjQuery変更メソッド

私はjQueryをシンプルでエレガントなAPIで100％受け入れようとしていますが、APIとストレートHTMLの間に矛盾があり、それを理解することはできません。

ファイル入力値が変更されるたびに実行するAJAXファイルアップローダースクリプト（正しく機能する）があります。私の作業コードは次のとおりです。

<input type="file" size="45" name="imageFile" id="imageFile" onchange="uploadFile()">

onchangeイベントをjQuery実装に変換すると：

$('#imageFile').change(function(){ uploadFile(); });

結果は同じではありません。 onchange属性を使用すると、期待どおりに値が変更されるたびにuploadFile()関数が呼び出されます。ただし、jQuery API .change()イベントハンドラーでは、イベントは値が最初に変更されたときにのみ発生します。その後の値の変更は無視されます。これは私には間違っているように思えますが、確かにこれはjQueryによる監視ではありませんよね？

他の誰かが同じ問題に遭遇しましたか？また、上記で説明した以外の問題の回避策または解決策はありますか？

jqueryfile-uploadinputevent-handlingonchange
66
gurun8

ajaxアップローダーは入力要素を更新しますか？その場合は、.live（）メソッドの使用を検討する必要があります。

 $('#imageFile').live('change', function(){ uploadFile(); });

更新：

jQuery 1.7以降では、今すぐ使用する必要があります.on（）

 $(parent_element_selector_here or document ).on('change','#imageFile' , function(){ uploadFile(); });
87
Luis Melgratti

JQuery 1.7以降、.live（）メソッドは非推奨になりました。 .on（）を使用して、イベントハンドラーをアタッチします。 jQueryの古いバージョンのユーザーは、.live（）よりも.delegate（）を使用する必要があります。参照： http://api.jquery.com/on/

$('#imageFile').on("change", function(){ uploadFile(); });
63
macio.Jun

ファイル入力タイプにjQueryイベントハンドラーを追加しても、IE8 +を動作させることができませんでした。古い学校に行って、onchange=""属性をinputタグに追加する必要がありました。

<input type='file' onchange='getFilename(this)'/>

function getFileName(Elm) {
   var fn = $(Elm).val();
   ....
}

編集：

function getFileName(Elm) {
   var fn = $(Elm).val();
   var filename = fn.match(/[^\\/]*$/)[0]; // remove C:\fakename
   alert(filename);
}
10
rodney hise