Comment puis-je prévisualiser les images avant de les télécharger en utilisant HTML5 ?

Prévisualisation d'une image avant de la télécharger

Dans le développement Web, il peut être avantageux de fournir aux utilisateurs un aperçu d'une image avant de la soumettre. . Cela permet aux utilisateurs de s'assurer que l'image est correcte avant de la télécharger, réduisant ainsi potentiellement le nombre d'erreurs et de retouches.

La solution : l'interface de fichier HTML5

Heureusement, le HTML5 L'interface de fichier fournit un moyen simple de prévisualiser les images dans le navigateur sans faire de requête au serveur ni utiliser Ajax. Voici comment cela fonctionne :

1. Créer un élément d'image

Créer un élément HTML élément avec un identifiant (par exemple, blah) pour afficher l'aperçu de l'image.

2. Récupérez le fichier à partir de l'entrée

Ajoutez un gestionnaire d'événements onchange à l'élément d'entrée du fichier. Lorsqu'un fichier est sélectionné, le gestionnaire d'événements extrait le fichier sélectionné de l'élément d'entrée.

3. Utilisez l'interface de fichier

Créez une URL d'objet pour le fichier sélectionné à l'aide de la méthode URL.createObjectURL(). Cela crée une URL temporaire qui permet au navigateur d'afficher l'image.

4. Mettre à jour la source de l'image

Définissez l'attribut src du fichier élément à l’URL de l’objet. Cela affichera l'aperçu de l'image sélectionnée.

Exemple de code

<input accept="image/*" type='file'>

imgInp.onchange = evt => {
  const [file] = imgInp.files;
  if (file) {
    blah.src = URL.createObjectURL(file);
  }
};

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!