Comment puis-je remplir automatiquement la valeur d'un fichier d'entrée par glisser-déposer ?

Comment remplir automatiquement la valeur du fichier d'entrée lors d'un glisser-déposer sur la page

Arrière-plan :

Pour des raisons de sécurité, il n'était auparavant pas possible de définir par programmation la valeur des fichiers d'entrée à l'aide de JavaScript. Cependant, avec les progrès de la technologie des navigateurs, cela a changé.

Solution :

Étape 1 : Activer le dépôt de fichiers

Ajoutez des écouteurs d'événements par glisser-déposer au conteneur souhaité :

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

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

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

Étape 2 : Attribuer une valeur de fichier

Capturez l'objet FileList à partir de l'événement dataTransfer :

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

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

Remplacez "conteneur" par l'ID de l'élément conteneur sur lequel vous souhaitez activer le glisser-déposer, et "file-input" avec l'ID du fichier d'entrée element.

Remarque :

Cette méthode fonctionne sur les navigateurs modernes qui prennent en charge la spécification.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!