Comment utiliser FileReader dans JS pour implémenter la fonction de prévisualisation locale avant de télécharger des images-js tutoriel-php.cn

Comment utiliser FileReader dans JS pour implémenter la fonction de prévisualisation locale avant de télécharger des images

亚连

Libérer： 2018-06-02 09:52:02

original

1894 Les gens l'ont consulté

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 photos. Les amis qui en ont besoin peuvent se référer à l'introduction

<.>

Lors du téléchargement et de la prévisualisation des images, s'il n'y a pas d'exigences particulières, téléchargez simplement l'image directement en arrière-plan, obtenez l'URL puis affichez-la sur la page. Cela ne posera aucun problème lorsque l'image sera affichée. est relativement petit. S'il est plus grand, son affichage sera plus lent. Il est temps de prévisualiser et des fichiers indésirables sont 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 je l'ai résumée brièvement :

Tout d'abord, vous devez obtenir le fichier. object

Lors du téléchargement d'images à l'aide de 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 MDN La déclaration ci-dessus :

L'objet FileReader permet à une application Web de lire de manière asynchrone le contenu d'un fichier (ou brut tampon de données) stocké sur l'ordinateur de l'utilisateur, à l'aide d'un objet File ou Blob pour spécifier le fichier ou les données à lire.

Tout d'abord, vous devez obtenir un objet instance de FileReader en tant que constructeur

var freader = new FileReader();

Copier après la connexion

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

freader.readAsDataURL(file);

Copier après la connexion

Le dernier est un traitement événementiel, ce qui équivaut à surveiller la progression de la lecture. Ici, nous rendons l'image lorsque la lecture est terminée, alors utilisez onload

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

Copier après la connexion

Une fois le rack chargé, vous vous retrouvez avec une adresse src codée en base64. Je découvrirai pourquoi la prochaine fois et. écrivez 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(&#39;myImg&#39;);
 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>

Copier après la connexion

Ce qui précède est ce que j'ai compilé pour vous, j'espère qu'il vous sera utile à l'avenir. .

Articles associés :

Comment apprendre les modules process et child_process dans node (tutoriel détaillé)

via jQuery+ Méthode de requête inter-domaines JSONP (tutoriel détaillé)

En implémentant la requête http et en chargeant l'affichage dans Vue2.0

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!