interface Web
js tutoriel
Comment prévisualiser les images localement lors de leur téléchargement
Comment prévisualiser les images localement lors de leur téléchargement
Cette fois, je vais vous montrer comment mettre en œuvre l'aperçu local lors du téléchargement de photos. Quelles sont les précautions pour mettre en œuvre l'aperçu local lors du téléchargement de photos. Voici un cas pratique, jetons un coup d'œil.
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 images. Les amis qui en ont besoin peuvent se référer à l'introduction
<.>
Ce que je fais habituellement Lors du téléchargement et de la prévisualisation d'images, s'il n'y a pas d'exigences particulières, téléchargez simplement l'image directement en arrière-plan. Après succès, obtenez l'URL, puis affichez-la sur la page. problème lorsque l’image est relativement petite. Si elle est plus grande, son affichage sera plus lent 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, 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.
Lors de l'utilisation deinput Lorsque la balise télécharge 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 de un fichier (ou tampon de données brutes) stocké sur l'ordinateur de l'utilisateur, utilisant un objet File ou Blob pour spécifier les fichiers ou données récupérés lus. Tout d'abord, en tant queconstructeur, obtenez un objet instance de FileReader
var freader = new FileReader();
freader.readAsDataURL(file);
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); }<!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>Définir l'expiration des cookies, la mise à jour automatique et l'acquisition automatique
Utiliser l'importation et exiger le package JS
Comment gérer la superposition d'options de sélection
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
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)
Comment ajouter de la musique locale à la musique soda
Feb 23, 2024 pm 07:13 PM
Comment ajouter de la musique locale à Soda Music ? Vous pouvez ajouter votre musique locale préférée à l'application Soda Music, mais la plupart des amis ne savent pas comment ajouter de la musique locale. Voici ensuite le didacticiel graphique sur la façon d'ajouter de la musique locale à Soda Music. l'éditeur. , les utilisateurs intéressés viennent jeter un œil ! Tutoriel sur l'utilisation de la musique soda. Comment ajouter de la musique locale à la musique soda. 1. Ouvrez d'abord l'application soda music et cliquez sur la zone de fonction [Musique] en bas de la page principale. l'icône [trois points] dans le coin inférieur droit ; 3. Enfin, développez la barre de fonctions ci-dessous et sélectionnez le bouton [Télécharger] pour l'ajouter à la musique locale.
Comment ajouter un filigrane et enregistrer des images distantes après les avoir enregistrées localement en PHP ?
Jul 11, 2023 pm 11:48 PM
Comment ajouter un filigrane et enregistrer des images distantes après les avoir enregistrées localement en PHP ? Dans le développement PHP, nous rencontrons souvent le besoin de sauvegarder localement des images distantes. Parfois, nous pouvons également avoir besoin d'ajouter un filigrane à l'image enregistrée pour protéger les droits d'auteur ou ajouter des informations supplémentaires. Cet article explique comment utiliser PHP pour enregistrer des images distantes en local et ajouter des filigranes aux images enregistrées. 1. Enregistrez les images distantes en local. Tout d'abord, nous devons utiliser la fonction d'opération de fichier de PHP pour enregistrer les images distantes en local. Voici un exemple de code simple : &
Comment implémenter le défilement des images et l'aperçu des vignettes dans Vue ?
Aug 18, 2023 pm 01:51 PM
Comment implémenter le défilement des images et l'aperçu des vignettes dans Vue ? Dans les projets Vue, nous devons souvent afficher un grand nombre d'images et espérer que les utilisateurs pourront parcourir et prévisualiser ces images facilement. Cet article explique comment utiliser les composants Vue pour implémenter les fonctions de défilement d'images et d'aperçu des vignettes. Tout d'abord, nous devons installer et introduire la bibliothèque Vue appropriée pour faciliter le défilement des images et l'aperçu des vignettes. Dans cet exemple, nous utiliserons les deux bibliothèques vue-awesome-swiper et vue-image-preview pour implémenter
Accès anticipé aux futures fonctionnalités Safari Technology Preview 173 publié
Jul 02, 2023 pm 01:37 PM
Apple a publié aujourd'hui la version 173 de Safari Technology Preview, qui couvre certaines fonctionnalités susceptibles d'être lancées dans Safari 17. Cette version convient à la version bêta de macOS Sonoma et au système macOS Ventura. Les utilisateurs intéressés peuvent la télécharger sur le site officiel. Safari Technology Preview version 173 ajoute un bloc d'indicateur de fonctionnalité dans les paramètres, remplaçant la fonctionnalité expérimentale dans le menu de développement d'origine. Cette section permet aux développeurs de rechercher rapidement des fonctionnalités spécifiques et marque le statut comme « stable », « disponible pour les tests », « aperçu » ou « développeur » sous différentes formes. Le menu de développement repensé permet aux créateurs de trouver plus facilement les outils clés pour créer des pages Web, des applications Web, du contenu Web dans d'autres applications,
Existe-t-il un avenir pour l'emploi en pharmacie clinique à l'Université médicale de Harbin ? (Quelles sont les perspectives d'emploi pour la pharmacie clinique à l'Université médicale de Harbin ?)
Jan 02, 2024 pm 08:54 PM
Quelles sont les perspectives d'emploi de la pharmacie clinique à l'Université médicale de Harbin ? Bien que la situation nationale de l'emploi ne soit pas optimiste, les diplômés en pharmacie ont toujours de bonnes perspectives d'emploi. Dans l'ensemble, l'offre de diplômés en pharmacie est inférieure à la demande. Les sociétés pharmaceutiques et les usines pharmaceutiques sont les principaux canaux d'absorption de ces diplômés. La demande de talents dans l'industrie pharmaceutique augmente également de manière constante. Selon les rapports, ces dernières années, le rapport offre-demande pour les étudiants diplômés dans des domaines tels que les préparations pharmaceutiques et la chimie médicinale naturelle a même atteint 1:10. Direction d'emploi de la majeure en pharmacie clinique : Après l'obtention de leur diplôme, les étudiants se spécialisant en médecine clinique peuvent s'engager dans le traitement médical, la prévention, la recherche médicale, etc. dans les unités médicales et sanitaires, la recherche médicale et d'autres départements. Postes d'emploi : Représentant médical, représentant commercial pharmaceutique, représentant commercial, directeur commercial, directeur régional des ventes, responsable des investissements, chef de produit, spécialiste produit, infirmière
Comment implémenter le téléchargement et l'aperçu d'images de formulaire dans le traitement des formulaires Vue
Aug 10, 2023 am 11:57 AM
Comment implémenter le téléchargement et l'aperçu d'images de formulaire dans le traitement de formulaire Vue Introduction : Dans les applications Web modernes, le traitement de formulaire est une exigence très courante. Une exigence courante consiste à permettre aux utilisateurs de télécharger des images et de les prévisualiser dans un formulaire. En tant que framework front-end, Vue.js nous fournit une multitude d'outils et de méthodes pour répondre à cette exigence. Dans cet article, je vais vous montrer comment implémenter les fonctions de téléchargement et d'aperçu d'images dans le traitement des formulaires Vue. Étape 1 : Définir les composants Vue Tout d'abord, nous devons définir un groupe Vue
Guide d'installation de l'apk Win11
Jan 03, 2024 pm 10:24 PM
Comme nous le savons tous, Microsoft a annoncé que Win11 sera capable d'exécuter des applications Android et d'installer l'apk local. Cependant, après la mise à jour de Win11, les utilisateurs ont constaté qu'ils ne savaient pas comment installer l'apk local. encore implémenté cette fonctionnalité pour win11. Il faut attendre que la fonction soit installée avant de pouvoir l'utiliser. Comment installer l'apk local dans win11 : 1. Selon Microsoft, une fois que win11 a installé cette fonction, vous pouvez directement double-cliquer sur le fichier apk téléchargé pour l'installer directement. 2. Une fois l'installation terminée, les utilisateurs peuvent également l'exécuter directement dans le système. 3. Bien qu'il s'agisse désormais de la version officielle de Win11, Microsoft n'a pas encore implémenté cette fonctionnalité pour Win11. 4. Donc, si l'utilisateur souhaite utiliser Win11
Comment télécharger et prévisualiser des images via Vue ?
Aug 19, 2023 pm 09:25 PM
Comment télécharger et prévisualiser des images via Vue ? Présentation : dans les applications Web modernes, le téléchargement et la prévisualisation d'images sont une exigence courante. Vue, en tant que framework JavaScript populaire, fournit un moyen pratique d'atteindre cette fonction. Cet article expliquera comment utiliser Vue pour télécharger et prévisualiser des images, y compris la conception de l'interface frontale et le traitement de l'interface back-end. Conception de l’interface frontale : Tout d’abord, nous devons concevoir une interface frontale pour sélectionner et télécharger des images. Dans Vue, nous pouvons utiliser <i
