Auswahlereignis für HTML-Eingabedateien wird bei Auswahl derselben Datei nicht ausgelöst

Gibt es eine Möglichkeit, jede Dateiauswahl zu erkennen, die der Benutzer für ein HTML- Element inputvom Typ getroffen hat file?

Dies wurde schon oft gefragt, aber das normalerweise vorgeschlagene onchangeEreignis wird nicht ausgelöst, wenn der Benutzer dieselbe Datei erneut auswählt.

Setzen Sie den Wert der inputzu nullauf jeder onclickVeranstaltung. Dadurch wird der inputWert des 's zurückgesetzt und das onchangeEreignis ausgelöst , auch wenn derselbe Pfad ausgewählt ist.

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

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

Hier ist eine DEMO .

Hinweis: Es ist normal, wenn Ihrer Datei das Präfix "C: \ fakepath \" vorangestellt ist. Dies ist eine Sicherheitsfunktion, die verhindert, dass JavaScript den absoluten Pfad der Datei kennt. Der Browser weiß es noch intern.

<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; ist nur für Chrome erforderlich, Firefox funktioniert nur mit return false;

Hier ist ein FIDDLE

In diesem Artikel unter dem Titel "Verwenden der Formulareingabe zur Auswahl"

http://www.html5rocks.com/de/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>

Es fügt einen Ereignis-Listener zu 'change' hinzu, aber ich habe ihn getestet und er wird ausgelöst, selbst wenn Sie dieselbe Datei auswählen und nicht, wenn Sie abbrechen.

Verwenden Sie das Ereignis onClick, um den Wert der Zieleingabe jedes Mal zu löschen, wenn der Benutzer auf das Feld klickt. Dadurch wird sichergestellt, dass das Ereignis onChange auch für dieselbe Datei ausgelöst wird. Arbeitete für mich :)

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

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

Verwenden von TypeScript

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

Tun Sie, was immer Sie tun möchten, nachdem die Datei erfolgreich geladen wurde. Setzen Sie den Wert der Dateisteuerung nach Abschluss Ihrer Dateiverarbeitung auf eine leere Zeichenfolge. Daher wird .change () immer aufgerufen, auch wenn sich der Dateiname ändert oder nicht. wie zum Beispiel kannst du dieses Ding machen und hast für mich wie Charme gearbeitet

   $('#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 = ''
}

Das Löschen des Werts des 0. Index der Eingabe hat bei mir funktioniert . Bitte versuchen Sie den folgenden Code, hoffen Sie, dass dies funktioniert (AngularJs).

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