Comment définir par programme la valeur d'entrée d'un fichier par glisser-déposer ?

Comment définir la valeur d'entrée du fichier lors du dépôt d'un fichier sur la page ?

Dans le but de créer un contrôle dans lequel les utilisateurs peuvent à la fois sélectionner et sélectionner manuellement déposez des fichiers pour soumettre un formulaire, vous avez rencontré un problème : l'entrée du fichier reste vide lorsque les fichiers sont supprimés. Alors que les problèmes de sécurité empêchaient auparavant la définition par programme des valeurs d'entrée de fichier, les navigateurs modernes ont corrigé ces vulnérabilités.

La solution : utiliser DataTransfer ou FileList

Vous pouvez désormais définir les valeurs d'entrée de fichier sur les navigateurs modernes en utilisant les objets dataTransfer ou FileList. Depuis décembre 2017, Firefox et d'autres navigateurs majeurs autorisent la manipulation programmatique des entrées de fichiers.

Méthode :

1. Empêcher le comportement des événements par défaut lors des événements de glisser-déplacer et de glisser-déposer pour activer les fichiers. interaction d'entrée.

2. Sur le drop event :

   • Définissez fileInput.files égal aux fichiers supprimés obtenus à partir de e.dataTransfer.files. Cela attribue les fichiers déposés sur la page à l'entrée de fichier.
3. Supprimez les repères visuels indiquant que l'utilisateur fait glisser.

Exemple :

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

Remarque : Cette méthode fonctionne sur les navigateurs modernes et fournit un moyen sécurisé de gérer les entrées de fichiers avec la fonctionnalité glisser-déposer.

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!