Maison > Article > interface Web > FileReader prévisualise les images localement avant de les télécharger

FileReader prévisualise les images localement avant de les télécharger

小云云original: 2018-03-05 09:43:321019parcourir

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. Lors du téléchargement et de la prévisualisation 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. Cela ne posera aucun problème lorsque l'image est affichée. relativement petit, mais il sera plus lent s'il est plus grand. Ce n'est qu'alors que vous pourrez voir l'aperçu, et des fichiers indésirables sont également générés, il est donc préférable de le prévisualiser localement avant de le 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

Lorsque vous téléchargez une image avec la balise d'entrée, l'objet événement contiendra une collection d'objets fichier

event.target.files

Le noyau est l'objet FileReader

Selon vers MDN :

L'objet FileReader permet aux applications Web de lire de manière asynchrone les fichiers stockés dans les fichiers utilisateur Le contenu d'un fichier (ou d'un tampon de données brutes) sur l'ordinateur, en utilisant un objet File ou Blob pour spécifier le fichier ou les 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 le cadre chargé, 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. 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 implémenter la fonction d'aperçu local d'image JavaScript

jquery implémente la fonction d'aperçu local de téléchargement d'image compatible avec le navigateur_ jquery

jquery implémente la fonction de prévisualisation locale avant l'image upload_jquery

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 des principales commandes et résultats de sortie sous LinuxArticle suivant：Explication détaillée des principales commandes et résultats de sortie sous Linux

Articles Liés

Voir plus