Maison > Article > interface Web > Comment prévisualiser les images localement lors de leur téléchargement

Comment prévisualiser les images localement lors de leur téléchargement

php中世界最好的语言original: 2018-03-17 11:53:441963parcourir

Cette fois, je vais vous montrer comment mettre en œuvre l'aperçu local lors du téléchargement de photos. Quelles sont les précautions pour mettre en œuvre l'aperçu local lors du téléchargement de photos. Voici un cas pratique, jetons un coup d'œil.

L'objet FileReader permet à une application Web de lire de manière asynchrone le contenu d'un fichier (ou d'un tampon de données brutes) stocké sur l'ordinateur de l'utilisateur, en utilisant un objet File ou Blob pour spécifier le fichier ou les données à lire. Cet article vous présentera l'utilisation de FileReader dans JS pour réaliser la fonction de prévisualisation locale avant de télécharger des images. Les amis qui en ont besoin peuvent se référer à l'introduction

<.>

Ce que je fais habituellement Lors du téléchargement et de la prévisualisation d'images, s'il n'y a pas d'exigences particulières, téléchargez simplement l'image directement en arrière-plan. Après succès, obtenez l'URL, puis affichez-la sur la page. problème lorsque l’image est relativement petite. Si elle est plus grande, son affichage sera plus lent et des fichiers indésirables seront générés. Il est donc préférable de la prévisualiser localement avant de la télécharger.

Lorsque je travaillais sur un projet et cherchais un plug-in, je savais que le front-end pur pouvait réaliser un aperçu local des images, mais lorsqu'on m'a posé des questions à ce sujet lors de l'interview d'aujourd'hui, j'étais confus, puis j'ai accidentellement découvert l'implémentation sur le bureau de l'ordinateur, puis j'ai vérifié l'API basée sur la démo et j'ai brièvement résumé :

Vous devez d'abord obtenir l'objet File.

Lors de l'utilisation de

input Lorsque la balise télécharge une image, l'objet événement contiendra une collection d'objets fichier

event.target.files

Le noyau est l'objet FileReader

Selon MDN :

L'objet FileReader permet à une application Web de lire de manière asynchrone le contenu de un fichier (ou tampon de données brutes) stocké sur l'ordinateur de l'utilisateur, utilisant un objet File ou Blob pour spécifier les fichiers ou données récupérés lus.

Tout d'abord, en tant que

constructeur, obtenez un objet instance de FileReader

var freader = new FileReader();

Utilisez la méthode readAsDataURL() pour lire le contenu spécifié

freader.readAsDataURL(file);

La dernière chose est un

traitement d'événement, qui équivaut à surveiller la progression de la lecture. Ici, nous rendons l'image lorsque la lecture est terminée, nous utilisons donc onload

freader.onload = function(e) { console.log(e); myImg.setAttribute('src', e.target.result); }

. Une fois l'étagère chargée, nous obtenons enfin une adresse src codée en base64. Je vérifierai la raison spécifique la prochaine fois et j'écrirai un article spécial sur l'encodage base64

Code complet

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <form action=""> 
 <input type="file" name="files" id="fileTog" accept="image/*" multiple="multiple" onchange="changImg(event)"> 
 <img alt="暂无图片" id="myImg" src="" height="100px" width="100px"> 
 </form>
 <script>
 function changImg(e){ 
 var myImg = document.getElementById('myImg');
 for (var i = 0; i < e.target.files.length; i++) { 
 var file = e.target.files[i]; 
 console.log(file); 
 if (!(/^image\/.*$/i.test(file.type))) { 
  continue; //不是图片 就跳出这一次循环 
 } 
 //实例化FileReader API 
 var freader = new FileReader(); 
 freader.readAsDataURL(file); 
 freader.onload = function(e) { 
  console.log(e);
  myImg.setAttribute(&#39;src&#39;, e.target.result); 
 } 
 } 
 }
 </script>
</body>
</html>

I. Je crois que vous l'avez maîtrisé après avoir lu le cas dans cet article. Pour des méthodes plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Définir l'expiration des cookies, la mise à jour automatique et l'acquisition automatique

Utiliser l'importation et exiger le package JS

Comment gérer la superposition d'options de sélection

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée de l'implémentation JS de todolistArticle suivant：Explication détaillée de l'implémentation JS de todolist

Articles Liés

Voir plus