Wie kann ich den Wert einer Dateieingabe nach einem Drag-and-Drop programmgesteuert festlegen?

Wie lege ich den Dateieingabewert beim Ablegen einer Datei auf der Seite fest?

Beim Erstellen eines Dateieingabesteuerelements, das sowohl die herkömmliche Dateiauswahl als auch das Ziehen ermöglicht -and-drop ist es wichtig sicherzustellen, dass das Dateieingabefeld die abgelegte Datei korrekt wiedergibt. Allerdings war das Festlegen des Dateieingabewerts über JavaScript in der Vergangenheit aus Sicherheitsgründen eingeschränkt.

Lösung

Zum Glück haben moderne Browser diese Sicherheitslücken behoben und dies ermöglicht uns, um die Dateieigenschaft der Eingabe[type="file"] programmgesteuert anzupassen. Dadurch können wir die Auswirkung des Ablegens einer Datei in das Dateieingabefeld simulieren.

Implementierungsdetails

1. Drag-and-Drop-Ereignis behandeln : Verwenden Sie Ereignis-Listener, um Drag-Over-, Drag-Leave- und Drop-Ereignisse auf dem gewünschten Zielelement (z. B. einem Container, der die Dateieingabe umgibt) zu überwachen Feld).
2. Standardaktion verhindern: Verhindern Sie das standardmäßige Drag-and-Drop-Verhalten, um es individuell zu handhaben.
3. Zugriff auf DataTransfer oder FileList: Zum Ablegen Dateien, rufen Sie das dataTransfer-Objekt oder die FileList aus dem an den Ereignishandler übergebenen E-Objekt ab.
4. Datei festlegen Eingabefeld: Weisen Sie die Dateieigenschaft des Zieldatei-Eingabefelds entweder den in Schritt 3 erhaltenen dataTransfer.files oder FileList zu. Durch diese Aktion wird das Dateieingabefeld effektiv mit den abgelegten Dateien gefüllt.

Beispielcode

Hier ist ein JavaScript-Codeausschnitt, der zeigt, wie der Dateieingabewert festgelegt wird, wenn a Datei wird auf der Seite abgelegt:

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

// Configure drag and drop event listeners
target.addEventListener('dragover', (e) => {
  e.preventDefault();
  body.classList.add('dragging');
});

target.addEventListener('dragleave', () => {
  body.classList.remove('dragging');
});

target.addEventListener('drop', (e) => {
  e.preventDefault();
  body.classList.remove('dragging');

  fileInput.files = e.dataTransfer.files;
});

Mit diesem Code können Sie den Dateieingabewert festlegen und so eine nahtlose Interaktion zwischen der Auswahl von Dateien über das Dateieingabefeld oder dem direkten Ablegen auf der Seite ermöglichen ausgewiesener Bereich.

Das obige ist der detaillierte Inhalt vonWie kann ich den Wert einer Dateieingabe nach einem Drag-and-Drop programmgesteuert festlegen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!