Comment puis-je afficher un aperçu d'un fichier avant de le télécharger dans une application Web ?

Affichage d'un aperçu du fichier avant le téléchargement

Pour améliorer l'expérience utilisateur lors du téléchargement de fichiers, il est souvent souhaitable de fournir un aperçu de l'image avant le début du processus de téléchargement. En tirant parti des fonctionnalités natives du navigateur, vous pouvez y parvenir sans effort sans recourir aux téléchargements de fichiers asynchrones.

Pour prévisualiser une image avant de la télécharger, suivez ces étapes :

1. Créez un Élément d'entrée : créez un élément élément avec l'attribut accept défini sur "image/*". Cela permet aux utilisateurs de sélectionner des fichiers image.
2. Capturer la sélection de fichiers : utilisez un écouteur d'événement sur l'interface élément pour capturer la sélection de fichier. Lorsqu'un fichier est sélectionné, le gestionnaire d'événements sera déclenché.
3. Générer l'URL de l'objet : dans le gestionnaire d'événements, accédez au fichier sélectionné à l'aide de imgInp.files[0]. Pour afficher l'image, générez une URL temporaire à l'aide de URL.createObjectURL(file).
4. Afficher l'image : attribuez l'URL générée à l'attribut src d'un élément sur votre page. Cela affichera l'image sous forme d'aperçu.

Voici un exemple d'extrait de code montrant comment y parvenir :

const imgInp = document.getElementById("imgInp");

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

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

En implémentant cette méthode, vous pouvez accorder votre aux utilisateurs la possibilité de visualiser leur image sélectionnée avant de s'engager dans le processus de téléchargement, améliorant ainsi la convivialité de votre application Web.

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!