Wie lege ich Dateieingabewerte nach Drag-and-Drop programmgesteuert fest?

Dateieingabewert beim Seitenablegen festlegen

Hintergrund

Sie arbeiten an einem Steuerelement, das die Dateiauswahl und -übermittlung ermöglicht durch Absturz in einen dafür vorgesehenen Bereich. Sie bemerken jedoch, dass die Dateieingabe leer bleibt, bis das Formular manuell übermittelt wird.

Lösung: Dateiobjekt über JavaScript festlegen

Glücklicherweise ermöglichen moderne Browser jetzt programmgesteuerte Einstellungen von Eingabedateien mithilfe der Dateieigenschaft. So können Sie es mithilfe der Datenübertragung implementieren:

let target = document.documentElement;
let fileInput = document.querySelector('input');

target.addEventListener('drop', (e) => {
  e.preventDefault();
  fileInput.files = e.dataTransfer.files;
});

Alternative Methode: FileList

Sie können den Dateieingabewert auch über ein FileList-Objekt festlegen:

let fileInput = document.querySelector('input');

fileInput.files = [file1, file2, ...];

Haftungsausschluss

Die Möglichkeit, Eingaben festzulegen Dateiwerte hängen von der Datenübertragung oder der Verfügbarkeit von FileList-Objekten ab. Mit dieser Funktion verbundene ältere Sicherheitsrisiken wurden in modernen Browsern behoben.

Beispiel

Eine Demonstration finden Sie im bereitgestellten Code-Snippet unten:

let fileInput = document.querySelector('input');</p><p>target.addEventListener('drop', (e) => {<br> e.preventDefault();<br> fileInput.files = e.dataTransfer.files;<br>});

Das obige ist der detaillierte Inhalt vonWie lege ich Dateieingabewerte nach Drag-and-Drop programmgesteuert fest?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!