Comment puis-je prévisualiser une image côté client avant de la télécharger ?

Prévisualiser une image côté client

Pour prévisualiser une image avant de la télécharger, vous pouvez exploiter l'entrée de fichier HTML et l'URL.createObjectURL () méthode. Voici une solution détaillée qui fonctionne entièrement dans le navigateur :

Dans votre formulaire HTML, ajoutez un champ de saisie qui permet de sélectionner une image :

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

Ensuite, créez un élément image pour afficher l'image. aperçu :

<img>

Enfin, ajoutez du JavaScript qui capture le fichier sélectionné dans le champ de saisie et utilise son contenu pour créer une URL d'objet qui est ensuite attribuée à l'image Attribut src de l'élément :

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

Lorsqu'un utilisateur sélectionne une image dans le champ de saisie, ce code mettra à jour dynamiquement l'élément d'image, affichant un aperçu de l'image sélectionnée sans avoir à la télécharger sur un serveur. Cette approche est pratique et efficace pour présenter un aperçu instantané des fichiers image côté client avant que l'utilisateur ne s'engage à les télécharger.

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!