76

シンプルでエレガントな API を使用して jQuery を 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 による見落としではありませんよね?

他の誰かが同じ問題に遭遇したことがありますか? また、私が上で説明した以外の問題に対する回避策または解決策はありますか?

4

3 に答える 3

93

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

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

アップデート：

jQuery 1.7+ から、今すぐ .on() を使用する必要があります

 $(parent_element_selector_here or document ).on('change','#imageFile' , function(){ uploadFile(); });
于 2010-04-27T12:55:33.863 に答える
76

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

$('#imageFile').on("change", function(){ uploadFile(); });
于 2013-01-15T18:16:35.477 に答える
11

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

<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);
}
于 2012-01-14T16:13:48.543 に答える