interface Web
js tutoriel
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
Apr 12, 2018 pm 02:53 PMCette 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('src', 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!
Article chaud
Outils chauds Tags
Article chaud
Tags d'article chaud
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
Comment résoudre le problème de l'enregistrement automatique des images lors de la publication sur Xiaohongshu ? Où est l'image enregistrée automatiquement lors de la publication ?
Mar 22, 2024 am 08:06 AM
Comment résoudre le problème de l'enregistrement automatique des images lors de la publication sur Xiaohongshu ? Où est l'image enregistrée automatiquement lors de la publication ?
Comment publier des photos dans les commentaires TikTok ? Où se trouve l'entrée des photos dans la zone commentaire ?
Mar 21, 2024 pm 09:12 PM
Comment publier des photos dans les commentaires TikTok ? Où se trouve l'entrée des photos dans la zone commentaire ?
6 façons de rendre les images plus nettes sur iPhone
Mar 04, 2024 pm 06:25 PM
6 façons de rendre les images plus nettes sur iPhone
Comment faire sortir les images ppt une par une
Mar 25, 2024 pm 04:00 PM
Comment faire sortir les images ppt une par une
Comment convertir des documents PDF en images jpg avec Foxit PDF Reader - Comment convertir des documents PDF en images jpg avec Foxit PDF Reader
Mar 04, 2024 pm 05:49 PM
Comment convertir des documents PDF en images jpg avec Foxit PDF Reader - Comment convertir des documents PDF en images jpg avec Foxit PDF Reader
Comment utiliser JavaScript pour implémenter la fonction glisser et zoomer des images ?
Oct 27, 2023 am 09:39 AM
Comment utiliser JavaScript pour implémenter la fonction glisser et zoomer des images ?
Comment utiliser HTML, CSS et jQuery pour implémenter des fonctions avancées de fusion et d'affichage d'images
Oct 27, 2023 pm 04:36 PM
Comment utiliser HTML, CSS et jQuery pour implémenter des fonctions avancées de fusion et d'affichage d'images
Que dois-je faire si les images de la page Web ne peuvent pas être chargées ? 6 solutions
Mar 15, 2024 am 10:30 AM
Que dois-je faire si les images de la page Web ne peuvent pas être chargées ? 6 solutions
