Wie kann ich den Wert einer Eingabedatei automatisch per Drag & Drop füllen?

So füllen Sie den Eingabedateiwert beim Ziehen und Ablegen auf der Seite automatisch aus

Hintergrund:

Aus Sicherheitsgründen war es bisher nicht möglich, den Wert von Eingabedateien mithilfe von JavaScript programmgesteuert festzulegen. Mit Fortschritten in der Browsertechnologie hat sich dies jedoch geändert.

Lösung:

Schritt 1: Dateiablage aktivieren

Fügen Sie Drag-and-Drop-Ereignis-Listener zum gewünschten Container hinzu:

const target = document.getElementById("container");

target.addEventListener("dragover", (e) => {
  e.preventDefault();
  target.classList.add("dragging");
});

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

Schritt 2: Datei zuweisen Wert

Erfassen Sie das FileList-Objekt aus dem dataTransfer-Ereignis:

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

  const files = e.dataTransfer.files;
  document.getElementById("file-input").files = files;
});

Ersetzen Sie „Container“ durch die ID des Containerelements, für das Sie Drag & Drop aktivieren möchten, und „ file-input“ mit der ID der Eingabedatei Element.

Hinweis:

Diese Methode funktioniert auf modernen Browsern, die die Spezifikation unterstützen.

Das obige ist der detaillierte Inhalt vonWie kann ich den Wert einer Eingabedatei automatisch per Drag & Drop füllen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!