Comment implémenter l'aperçu de l'image côté client avant le téléchargement ?

Affichage des aperçus des images avant le téléchargement

L'aperçu des images avant de les télécharger améliore l'expérience utilisateur en donnant aux utilisateurs un aperçu du contenu qu'ils ont l'intention de partager . L'exécution de cet aperçu entièrement dans le navigateur, éliminant le besoin de requêtes Ajax, garantit un processus transparent et efficace.

Implémentation des capacités d'aperçu d'image

Pour obtenir la fonctionnalité d'aperçu d'image, exploitez les capacités de l’API FileReader et de la méthode URL.createObjectURL(). Cette approche vous permet de charger le fichier image sélectionné sous forme d'URL et de l'afficher dans un élément d'image, comme démontré ci-dessous :

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

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

Ce code capture le fichier image à partir du champ de saisie (imgInp) et construit une URL qui représente le contenu de l'image à l'aide de URL.createObjectURL(file). Par la suite, l'élément image (blah) se voit attribuer cette URL, affichant l'image sélectionnée en aperçu.

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!