Wie lege ich den Dateieingabewert programmgesteuert per Drag & Drop fest?

Wie lege ich den Dateieingabewert fest, wenn ich eine Datei auf einer Seite ablege?

In einem Versuch, ein Steuerelement zu erstellen, bei dem Benutzer sowohl manuell auswählen als auch Wenn Sie Dateien löschen, um ein Formular zu senden, ist ein Problem aufgetreten: Die Dateieingabe bleibt leer, wenn Dateien gelöscht werden. Während aus Sicherheitsgründen bisher das programmgesteuerte Festlegen von Dateieingabewerten verboten war, haben moderne Browser diese Schwachstellen behoben.

Die Lösung: Verwenden Sie DataTransfer oder FileList

Sie können jetzt Dateieingabewerte festlegen in modernen Browsern mithilfe der dataTransfer- oder FileList-Objekte. Seit Dezember 2017 ermöglichen Firefox und andere gängige Browser die programmgesteuerte Manipulation von Dateieingaben.

Methode:

1. Standardereignisverhalten bei Dragover- und Dragleave-Ereignissen verhindern, um Dateien zu aktivieren Eingabeinteraktion.

2. Auf dem Drop Ereignis:

   • Setze fileInput.files gleich den gelöschten Dateien, die von e.dataTransfer.files erhalten wurden. Dadurch werden die auf der Seite abgelegten Dateien der Dateieingabe zugeordnet.
3. Die visuellen Hinweise, die darauf hinweisen, dass der Benutzer zieht, werden entfernt.

Beispiel:

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

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;
});

Hinweis: Diese Methode funktioniert auf modernen Browsern und bietet eine sichere Möglichkeit, Dateieingaben mit Drag-and-Drop-Funktionalität zu verarbeiten.

Das obige ist der detaillierte Inhalt vonWie lege ich den Dateieingabewert programmgesteuert per Drag & Drop fest?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!