Acara pemilihan file input HTML tidak diaktifkan setelah memilih file yang sama

Apakah ada peluang untuk mendeteksi setiap pemilihan file yang dibuat pengguna untuk elemen inputtipe HTML file?

Ini telah ditanyakan berkali-kali sebelumnya, tetapi acara yang biasanya diusulkan onchangetidak menyala jika pengguna memilih file yang sama lagi.

Tetapkan nilai inputto nullpada setiap onclickacara. Ini akan mengatur ulang inputnilai dan memicu onchangeacara bahkan jika jalur yang sama dipilih.

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

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

Ini DEMO .

Catatan: Adalah normal jika file Anda diawali dengan 'C: \ fakepath \'. Itu fitur keamanan yang mencegah JavaScript untuk mengetahui jalur absolut file. Browser masih mengetahuinya secara internal.

<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; hanya diperlukan untuk Chrome, Firefox akan berfungsi dengan baik hanya dengan return false;

Ini FIDDLE

Dalam artikel ini, di bawah judul "Menggunakan input formulir untuk memilih"

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>

Itu menambahkan pendengar acara ke 'perubahan', tapi saya mengujinya dan memicu bahkan jika Anda memilih file yang sama dan tidak jika Anda membatalkan.

Gunakan acara onClick untuk menghapus nilai input target, setiap kali pengguna mengklik bidang. Ini memastikan bahwa acara onChange akan dipicu untuk file yang sama juga. Bekerja untuk saya :)

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

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

Menggunakan TypeScript

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

Lakukan apa pun yang ingin Anda lakukan setelah file berhasil dimuat. Tepat setelah penyelesaian pemrosesan file Anda, atur nilai kontrol file ke string kosong. Jadi .change () akan selalu dipanggil meskipun nama file berubah atau tidak. seperti misalnya Anda dapat melakukan hal ini dan bekerja untuk saya seperti pesona

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

handleChange({target}) {
    const files = target.files
    target.value = ''
}

Menghapus nilai indeks input 0 bekerja untuk saya . Silakan coba kode di bawah ini, semoga ini berhasil (AngularJs).

          scope.onClick = function() {
            input[0].value = "";
                input.click();
            };