Entfernen von Dateien aus der Dateiliste in Drag-and-Drop-Uploads

Beim Erstellen einer Drag-and-Drop-Upload-Anwendung mit HTML5 können Sie dies tun Es kommt zu einem Szenario, in dem Sie bestimmte Dateien aus der Dateiliste entfernen müssen. Bevor Sie jedoch versuchen, dieses Problem zu lösen, müssen Sie unbedingt verstehen, dass die FileList in HTMLInputElement schreibgeschützt ist, wie im File API Working Draft angegeben.

Entire FileList

Während Sie keine einzelnen Dateien aus der Dateiliste entfernen können, gibt es eine alternative Lösung. Sie können die gesamte FileList löschen, indem Sie die Value-Eigenschaft des Eingabeobjekts auf eine leere Zeichenfolge setzen:

document.getElementById('multifile').value = "";

Vorsichtsmaßnahmen

Bei diesem Ansatz sollten Sie jedoch Vorsicht walten lassen. Da die gesamte FileList gelöscht wird, werden alle zuvor ausgewählten Dateien entfernt. Daher ist es wichtig, die Benutzererfahrung zu berücksichtigen und eine Bestätigung oder einen Sicherungsmechanismus bereitzustellen, bevor Sie die Dateiliste löschen.

Benutzerdefinierte Dateiverwaltung

Wenn Sie mehr Kontrolle darüber haben möchten Um die Dateiverarbeitung zu vereinfachen und das Löschen der gesamten FileList zu vermeiden, können Sie benutzerdefinierte Prüfungen innerhalb des Codes implementieren, der mit der FileList interagiert. Dies erfordert jedoch möglicherweise mehr Codierung und Validierung.

Zusätzliche Ressourcen

Weitere Informationen finden Sie im HTML 5-Arbeitsentwurf, der sich mit allgemeinen Eingabeelement-APIs befasst. Darüber hinaus liefert der Artikel „Dateien aus Webanwendungen verwenden“ wertvolle Einblicke in die Arbeit mit Dateien in Webanwendungen.