it-swarm.com.de

Das Auswahlereignis für die HTML-Eingabedatei wird nicht ausgelöst, wenn dieselbe Datei ausgewählt wird

Gibt es eine Möglichkeit, jede vom Benutzer für ein input-Element vom Typ file-Element getroffene Dateiauswahl zu ermitteln? 

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

153
dronus

Setzen Sie den Wert von input bei jedem null-Ereignis auf onclick. Dadurch wird der Wert von input zurückgesetzt und das Ereignis onchange ausgelöst, selbst 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 'C:\fakepath \' vorangestellt ist. Dies ist eine Sicherheitsfunktion, die verhindert, dass JavaScript den absoluten Pfad der Datei erkennt. Der Browser kennt es noch intern.

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

Hier ist eine GEIGE

17
elshnkhll

In diesem Artikel unter dem Titel "Verwenden der Formulareingabe zum Auswählen"

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 wählen und nicht, wenn Sie abbrechen.

7
Xacur Aphrantus

Führen Sie nach dem erfolgreichen Laden der Datei das aus, was Sie tun möchten. Stellen Sie den Wert der Dateikontrolle nach dem Abschluss der Dateiverarbeitung auf leere Zeichenfolge ein. Die .change () - Anweisung wird immer aufgerufen, auch wenn sich der Dateiname ändert oder nicht. wie zum Beispiel kann man dieses Ding machen und hat 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.
    });
1
Mohit Singh

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

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

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

TypeScript verwenden

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