webdevqa.jp.net

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

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

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

編集

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

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