web-dev-qa-db-ja.com

同じファイルを選択してもHTML入力ファイル選択イベントが発生しない

タイプinput要素のHTML fileに対してユーザーが行ったすべてのファイル選択を検出する機会はありますか？

これは以前何度も尋ねられましたが、通常提案されているonchangeイベントは、ユーザーが同じファイルを再度選択しても起動しません。

javascripthtmlformsjavascript-events
165
dronus

各inputイベントでnullの値をonclickに設定します。これにより、inputの値がリセットされ、同じパスが選択されている場合でもonchangeイベントがトリガーされます。

input.onclick = function () {
    this.value = null;
};

input.onchange = function () {
    alert(this.value);
};​

DEMO です。

注：ファイルの先頭に「C：\ fakepath \」が付いている場合は正常です。これは、JavaScriptがファイルの絶対パスを認識できないようにするセキュリティ機能です。ブラウザはまだ内部的に認識しています。

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

this.value=null;はChromeにのみ必要です。Firefoxはreturn false;で正常に動作します

これは FIDDLE です

17
elshnkhll

この記事では、「選択のためのフォーム入力の使用」というタイトルの下で

http://www.html5rocks.com/en/tutorials/file/dndfiles/

<input type="file" id="files" name="files[]" multiple />

<script>
function handleFileSelect(evt) {

    var files = evt.target.files; // FileList object

    // files is a FileList of File objects. List some properties.
    var output = [];
    for (var i = 0, f; f = files[i]; i++) {
     // Code to execute for every file selected
    }
    // Code to execute after that

}

document.getElementById('files').addEventListener('change', 
                                                  handleFileSelect, 
                                                  false);
</script>

'change'にイベントリスナーを追加しますが、同じファイルを選択し、キャンセルしない場合でもトリガーします。

7
Xacur Aphrantus

ファイルが正常に読み込まれた後、ファイル処理の完了後、ファイルコントロールの値を空の文字列に設定した後、ファイル名が変更されてもされなくても、.change（）が常に呼び出されます。たとえば、あなたはこのことを行うことができ、魅力のように私のために働いたような

   $('#myFile').change(function () {
       LoadFile("myFile");//function to do processing of file.
       $('#myFile').val('');// set the value to empty of myfile control.
    });
1
Mohit Singh

ユーザーがフィールドをクリックするたびに、onClickイベントを使用してターゲット入力の値をクリアします。これにより、同じファイルに対してonChangeイベントもトリガーされます。私のために働いた:)

onInputClick = (event) => {
    event.target.value = ''
}

<input type="file" onChange={onFileChanged} onClick={onInputClick} />

TypeScriptを使用する

onInputClick = ( event: React.MouseEvent<HTMLInputElement, MouseEvent>) => {
    const element = event.target as HTMLInputElement
    element.value = ''
}
0
Trafalgar Law