Comment définir par programme la valeur d'une entrée de fichier après un glisser-déposer ?

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

Lors de la création d'un contrôle d'entrée de fichier qui permet à la fois la sélection et le glissement de fichiers traditionnels -and-drop, il est important de s'assurer que le champ de saisie du fichier reflète correctement le fichier déposé. Cependant, la définition de la valeur d'entrée du fichier via JavaScript a été restreinte dans le passé en raison de problèmes de sécurité.

Solution

Heureusement, les navigateurs modernes ont corrigé ces vulnérabilités de sécurité, permettant nous pour ajuster par programme la propriété files de input[type="file"]. Cela nous permet de simuler l'effet du dépôt d'un fichier dans le champ de saisie du fichier.

Détails de mise en œuvre

1. Gérer l'événement glisser-déposer : Utilisez des écouteurs d'événements pour surveiller les événements de glisser-déposer et de glisser-déposer sur l'élément cible souhaité (par exemple, un conteneur entourant l'entrée du fichier champ).
2. Empêcher l'action par défaut : Empêcher le comportement de glisser-déposer par défaut pour le gérer de manière personnalisée.
3. Accéder à DataTransfer ou FileList : Pour les fichiers supprimés fichiers, obtenez l'objet dataTransfer ou FileList à partir de l'objet e transmis au gestionnaire d'événements.
4. Définir l'entrée du fichier Champ : Attribuez la propriété files du champ de saisie du fichier cible au dataTransfer.files ou à la FileList obtenu à l'étape 3. Cette action remplira efficacement le champ de saisie du fichier avec les fichiers déposés.

Exemple de code

Voici un extrait de code JavaScript qui montre comment définir la valeur d'entrée du fichier lorsqu'un fichier est déposé sur la page :

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

// Configure drag and drop event listeners
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;
});

Avec ce code en place, vous pourrez définir la valeur d'entrée du fichier, permettant une interaction transparente entre la sélection de fichiers via le champ de saisie de fichier ou leur dépôt direct sur l'emplacement désigné. région.

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!