Comment définir par programme les valeurs d'entrée de fichier après un glisser-déposer ?

Définition de la valeur d'entrée du fichier lors du dépôt de page

Arrière-plan

Vous travaillez sur un contrôle qui permet la sélection et la soumission de fichiers en se rendant dans une zone désignée. Cependant, vous remarquez que l'entrée du fichier reste vide jusqu'à ce que le formulaire soit soumis manuellement.

Solution : définition d'un objet fichier à partir de JavaScript

Heureusement, les navigateurs modernes autorisent désormais la configuration par programmation. des fichiers d'entrée à l'aide de la propriété files. Voici comment l'implémenter à l'aide du transfert de données :

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

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

Méthode alternative : FileList

Vous pouvez également définir la valeur d'entrée du fichier à partir d'un objet FileList :

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

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

Avis de non-responsabilité

La possibilité de définir la saisie les valeurs des fichiers dépendent du transfert de données ou des objets FileList disponibles. Les risques de sécurité hérités associés à cette fonctionnalité ont été résolus dans les navigateurs modernes.

Exemple

Une démonstration peut être trouvée dans l'extrait de code fourni ci-dessous :

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

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!