Maison > Article > interface Web > FileReader implémente l'aperçu local avant de télécharger des images

FileReader implémente l'aperçu local avant de télécharger des images

小云云original: 2018-03-03 09:10:191504parcourir

Lorsque vous téléchargez et prévisualisez habituellement des images, s'il n'y a pas d'exigences particulières, vous pouvez d'abord transférer directement l'image en arrière-plan. Après succès, vous pouvez obtenir l'URL puis l'afficher sur la page. lorsque l'image est relativement petite, si elle est plus grande, tout ira bien. La visualisation de l'aperçu sera plus lente 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. Cependant, lors de l'interview d'aujourd'hui, j'étais confus quand. On m'a demandé, puis je l'ai découvert par hasard sur le bureau de l'ordinateur. J'ai implémenté la démo, puis j'ai vérifié l'API basée sur la démo et je l'ai résumée brièvement :

Vous devez d'abord obtenir l'objet File.

Lors du téléchargement d'une image avec la balise d'entrée, l'objet événement contiendra l'objet fichier. Une collection

event.target.files

en son cœur est un objet FileReader

Selon MDN : L'objet

FileReader permet aux applications 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. Utilisez un objet File ou Blob pour spécifier le. fichier ou données à lire.

Tout d'abord, obtenez un objet instance de FileReader en tant que constructeur

var freader = new FileReader();

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

freader.readAsDataURL(file);

Enfin, il y a un gestionnaire d'événements , ce 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 la trame chargée, le résultat final est une base64. -adresse src codée. Pourquoi est-ce spécifique ? Après l'avoir vérifié pour la première fois, j'ai écrit 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>

Postscript

A travers cet incident, j'ai exposé une de mes façons d'apprendre de nouvelles choses. Le problème est simplement de le vérifier et de penser que vous le savez. Cette habitude est particulièrement nocive. À l'avenir, chaque fois que vous découvrez une question, vous ne devriez pas vous contenter de cela. vérifiez comment cela est fait, mais comprenez également pourquoi cela peut être fait. La soi-disant connaissance Vous savez pourquoi. De plus, vous pouvez taper le code habituel avec vos mains et essayer de ne pas le copier, c'est amusant pendant un moment, mais c'est embarrassant de ne pas pouvoir l'écrire à la main.

Aujourd'hui, c'est le troisième jour à Hangzhou et le deuxième jour d'entretiens. Un problème important exposé au cours de ces deux jours d'entretiens est que je m'appuie généralement trop sur les moteurs de recherche et que j'utilise trop peu de cerveau. ne peut pas être utilisé. Si vous ne vous souvenez pas de tout, il y a en effet beaucoup de choses dans le front-end que vous devez garder à l'esprit. Il n'y a pas de raccourcis. Ces choses sont les bases. eux, vous avez une mauvaise base. Bien que cela n’affecte pas votre capacité à créer des choses, cela affectera l’efficacité du développement. Si la technologie doit avancer, cette pierre angulaire doit être stable, alors gardez-la à l’esprit !

Recommandations associées :
Comment le domaine de fichiers de H5, FileReader, lit-il les fichiers par segments et les télécharge sur le serveur

JavaScript utilise FileReader pour réaliser le téléchargement d'images effets de prévisualisation

Analyse de l'utilisation de l'interface FileReader en HTML5

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：Pièges et solutions rencontrés par FastClickArticle suivant：Pièges et solutions rencontrés par FastClick

Articles Liés

Voir plus