1. Quelques méthodes pour réaliser l'aperçu de l'image.
Après l'avoir compris, les méthodes sont en fait similaires. Il y a probablement les moyens suivants:
① Abonnez-vous à l'événement OnChange de l'élément d'entrée [type = fichier].
Une fois le chemin sélectionné modifié, l'image est téléchargée sur le serveur et l'adresse de l'image est renvoyée du côté serveur et affectée à l'élément IMG.
Inconvénients: la charge de travail est grande. Certains téléchargements ne sont pas les images que les utilisateurs doivent télécharger à la fin. Cependant, cette méthode enregistrera toutes les images sélectionnées pendant le processus de téléchargement sur le serveur, ce qui entraînera un gaspillage de ressources. De plus, le nettoyage des images d'aperçu temporaire du côté serveur nécessite également une certaine quantité de travail.
Utilisez le nouveau fichier de fonctionnalités HTML5.
Cet objet fournit de nombreuses méthodes connexes, la méthode la plus importante est Readasdataurl. Cliquez sur moi pour en savoir plus.
Inconvénients: le schéma de données URI obtenu via la méthode ReadAsDataurl de FileReader générera une très longue chaîne de base64. Si l'image est plus grande, la chaîne sera plus longue. Si le reflux de la page se produit, cela entraînera une dégradation des performances. De plus, le support du navigateur est incohérent et les navigateurs pris en charge sont: FF3.6 +, Chrome7 +, IE10 +.
③ Utilisez Window.url.CreateObjectUrl au lieu de FileReader, puis utilisez le filtre DxiageTransform.microsoft.alphaimageLoader pour être compatible avec IE.
Inconvénients: En raison des considérations de sécurité dans IE11, l'adresse réelle du fichier sélectionné de l'utilisateur ne peut pas être obtenue via Valeur, OUTERHTML et GetAttribute sur l'élément d'entrée [type = fichier] et ne peut être obtenue.
D: / frontend / nom de fichier. Par conséquent, vous devez utiliser la méthode Document.Selection.CreaterAngeCollection pour obtenir l'adresse réelle.
2. Ma production de plug-in
J'ai choisi une méthode plus conservatrice, qui est la troisième méthode pour utiliser Window.url.CreateObjectUrl au lieu de FileReader, puis j'utilise le filtre DxiageTransform.microsoft.alphaimageLoader pour être compatible avec IE.
①La première étape est la disposition HTML
<div id = "pic"> <img id = "aperçu" src = "../ imgs / default.jpeg"> </ div> <input type = "file" id = "uploadBtn" accepte = "image / *" onchange = "setpreviewpic ()">
Voulez-vous dire si facile?
SEPT DE SECONDE, ENCAPSOLATION JS PROGDS.
1. Créez un objet
J'adopte principalement la méthode d'héritage combinée et encapsule deux méthodes, à savoir le téléchargement d'image unique et le téléchargement d'images multiples. Parce que, qu'il s'agisse de télécharger une seule image ou de télécharger une seule image, vous devez transmettre et télécharger le bouton d'entrée, la balise IMG, la div enveloppée dans IMG et la valeur d'image unique maximale, en KB. Par conséquent, ces quatre paramètres doivent être passés lors de la création de l'objet d'image de téléchargement. La méthode pour créer cet objet est la suivante:
var setPreviewpic = function (fileoBj, aperview, picWrap, maximgSize) {this.fileoBj = fileoBj; this.preview = apervie2. Définissez le modèle de correspondance
Parce qu'il télécharge des images, en plus d'ajouter l'accept = "image / *" pour saisir et effectuer des restrictions préliminaires, une régularité JS est également nécessaire pour déterminer s'il s'agit d'une image par détection de chemin. Définissez donc ce modèle sur le prototype pour une utilisation dans deux méthodes:
SetPreviewpic.prototype.Pattern = new regexp ('/. (Jpg | png | jpeg) + $', 'i');3. Définissez la méthode
L'essentiel est de déterminer si l'environnement est inférieur à IE11 et d'écrire deux types de solutions. La première consiste à prévisualiser directement l'image en modifiant le SRC d'IMG, et le second est d'atteindre l'effet d'aperçu via des filtres sous la version inférieure de IE.
FF, Chrome, IE11 ou supérieur: (Le code de prévisualisation multiples est publié ici)
<span> if (maxpics) {</span> <br> if (this.fileoBj.files && this.fileoBj.files [0]) {var imgs = this.picwrap.QuerySelectorAll ('img'); // Trouvez combien d'images sont déjà dans le dom var num = imgs.length; var html = this.picwrap.innerhtml; if (Number (num) <nombre (maxpics)) {// juger si la limite de téléchargement maximale est dépassée if (num == 1 && (! imgs [0] .classList.Contains ('newload'))) {// Couverture La première image par défaut html = '';} if (this.pattern.test (fileoBj.files [0] .name)) {if (jugeSize (fileoBj.files [0] .size / 1024, this.MaxImgsize)) {// juger si la taille de l'image dépasse la limite html = '<img style = "marge: 5px; largeur: '+ largeur +' px; hauteur: '+ hauteur +' px;" src = '+ window.url.createObjectUrl (this.fileoBj.files [0]) +' /> '+ html; this.picwrap.innerhtml = html;} else {alert ('L'image que vous avez téléchargée est trop grande!');}} else {alert ('Ce que vous avez téléchargé ne semble pas être une image, veuillez le vérifier!Sous IE11, utilisez des filtres pour réaliser l'effet:
var nums = this.picwrap.childnodes.length; // Parce que QuerySelectorall et d'autres méthodes ne sont pas pris en charge ci-dessous IE6, nous pouvons juger si (nums <maxpics + 2). if (document.selection) {var imgsrc = document.selection.createrange (). text; var image = new image (); image.src = imgsrc; fileSize = image.filesize; if (jugesize (image.filesize / 1024, this.MaxImgsize)) {// La taille de la div doit être définie dans IE var ele = document.CreateElement ('div'); ele.style.width = width + 'px'; ele.style.height = height + 'px'; ele.style.filter = "Progid: doxiagetra nsform.microsoft.alphaimageLoader (sizeMethod = échelle, src = '"+ imgsrc +"') "; try {this.picwrap.appendChild (ele);} catch (e) {alert ('the the the L'image que vous avez téléchargée est incorrecte, veuillez sélectionner à nouveau! '); return false;} this.preview.style.display = 'non'; document.selection.empty ();} else {alert ('L'image que vous avez téléchargée est trop grande!');}}À ce stade, c'est fait!
usage:
<script type = "text / javascript" src = "../ js / singlepic.js"> </ script> <script> var fileoBj = document.getElementByid ('uploadBtn'); var aperview = document.getElementyid ('aperview'); var picmentwrap = document.getElementyid ('pic'); fileoBJ.onchange = fonction () {var obj = nouveau '); SetPreViewPic (FileObj, Aperçu, PICWRAP, 100); // Définissez l'objet d'image de téléchargement, les paramètres sont le bouton d'entrée pour télécharger l'image, le package de balise IMG, le div enveloppé dans IMG et la valeur photo maximale, l'unité est KBOBJ.uploadSinglepic (200,250); // uploadsinglepics (200,250,2); // uploadPics (200,250,2); // uploadPics (200,250,2); // uploadPics (200,250,2); // uploadPics (200,250,2); // télécharge plusieurs images, les paramètres sont la largeur, la hauteur et le nombre maximal de téléchargements} </cript>Ce qui précède est les connaissances pertinentes sur la production de plug-in de prévisualisation d'image JS Upload Image (compatible à IE6) présentée par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, laissez-moi un message. L'éditeur vous répondra à temps!