web-dev-qa-db-ja.com

<input type = 'file' />のonchangeイベントの代替

本当に簡単なことのようですが、それを理解することはできません。要素でonchangeイベントを使用してきましたが、うまく機能します。ユーザーがファイルを参照して選択すると、パスを取得し、カスタムjs関数を使用してアップロードします。

問題は、ユーザーが同じファイルを2回続けて選択した場合、これが機能しないことです。onchangeは起動しません（何も変更されていないため、これは理にかなっています）が、私の場合は、そのイベントをキャプチャすることも重要です。パスとアップロード。

編集

（ jQueryを使用して<input type = 'file' />をクリアする と同様、これを重複として解決する必要があるかどうかわからない）

javascripthtmlfilejavascript-eventsfile-upload
14
Yasir Laghari

入力を削除して、javascriptを使用して同一の入力を作成できます。新しい入力は空になります。

（要点を明確にするために編集された回答、コメントは現在は無関係です）

8
raveren

ファイルの選択ボタンで入力onclickの内容をクリアすることができます。そうすれば、同じファイルを選択した場合でも、イベントがトリガーされます。もちろん、onchangeハンドラーは空白の値をチェックする必要がありますが、その値を使用してファイルをアップロードする場合は、とにかく同様のことを行う必要があります...

2
tfwright

ファイル入力で2回目に変更イベントを発生させることはできませんでしたが、スパンで変更イベントを発生させることはできます。以下はchrome andffで動作します。IEをチェックインしませんでした。$('#change_span').bind('change',function(){ alert($('#file_1').val()) })

<span id='change_span'><input id="file_1" type="file"></span>

1
Andrey

それを修正する方法は本当にありません。他のリスナーまたはタイマーを追加すると、ユーザーがファイルを望まない場合でも（たとえば、onclickを使用して）ファイルをアップロードする可能性があります。同じファイルを別の方法でアップロードすることはできませんか？アップロードが開始されたら入力をクリアするのはどうですか（または、クリアできない場合は新しい入力に置き換えてください）。

1
Marius

Onchangeコールバックで入力の値を「」に設定します。そうすれば、次に同じファイルが選択された場合でも、値が「」と異なるため、onchangeイベントがトリガーされます。

document.getElementById('files').value = "";
1
WebWanderer

この動作はIEにのみ存在しますか？もしそうなら、それはこの問題に関連している可能性があります：
IEで<select>のjQuery変更イベントが発生しない
本質的に：代わりにonClickをチェックする必要があるかもしれません。

0
Daniel Sloof
function resetFileInput ($element) {
  var clone = $element.clone(false, false);
  $element.replaceWith(clone);
}

そして、ライブを使用します。

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

私のためにうまくいった！

0
oreoshake

JQueryを使用したくない場合

<form enctype='multipart/form-data'>
    <input onchange="alert(this.value); return false;" type='file'>
    <br>
    <input type='submit' value='Upload'>
</form>

Firefoxでは正常に動作しますが、Chromeの場合、アラートの後にthis.value=null;を追加する必要があります。

0
elshnkhll