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

php中世界最好的语言original: 2018-04-12 14:53:291499parcourir

Cette fois, je vais vous présenter FileReader pour prévisualiser localement avant de télécharger des images. FileReader pour implémenter l'aperçu local avant de télécharger des images. Quelles sont les précautions. .

Introduction

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 que je cherchais un plug-in, je savais que le front-end pur pouvait réaliser un aperçu local des images. Cependant, lorsqu'on m'a posé des questions à ce sujet lors de l'interview d'aujourd'hui, j'ai été confus. j'ai trouvé la démo implémentée sur le bureau de l'ordinateur, puis vérifié en fonction de la démo, j'ai jeté un œil à l'API et je l'ai brièvement résumée :

. Vous devez d'abord récupérer l'objet File

Lorsque vous utilisez la balise d'entrée pour télécharger 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 d'un fichier (ou d'un tampon de données brutes) 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, 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 le rack chargé, vous obtenez finalement une adresse src codée en base64. Je découvrirai 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>

Post-scriptum

Cet incident a révélé l'un de mes problèmes pour apprendre de nouvelles choses. J'ai juste besoin de le vérifier et de le lire une fois avant de m'en rendre compte. À l'avenir, chaque fois que je trouve une question, je n'ai pas seulement besoin de vérifier. comment le faire. Oui, vous devez également comprendre pourquoi vous pouvez faire cela, ce qu'on appelle savoir ce que c'est et 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.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois php !

Lecture recommandée :

Comment exporter Excel à partir de l'interface utilisateur de l'élément

Explication détaillée des étapes permettant à vue-dplayer d'implémenter la lecture hls

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!

php 构造函数 Event 对象事件异步 input ui

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：5 façons de parcourir des tableaux en JavaScriptArticle suivant：5 façons de parcourir des tableaux en JavaScript

Articles Liés

Voir plus