1. Algunos métodos para realizar la vista previa de la imagen.
Después de entenderlo, los métodos son realmente similares. Probablemente hay las siguientes formas:
① Suscríbase al evento Onchange del elemento Entrada [Tipo = Archivo].
Una vez que se cambia la ruta seleccionada, la imagen se carga en el servidor y la dirección de la imagen se devuelve al lado del servidor y se asigna al elemento IMG.
Desventajas: la carga de trabajo es grande. Algunas cargas no son las imágenes que los usuarios necesitan cargar al final. Sin embargo, este método guardará todas las imágenes seleccionadas durante el proceso de carga en el servidor, lo que causará un desperdicio de recursos. Además, la limpieza de imágenes de vista previa temporal en el lado del servidor también requiere una cierta cantidad de trabajo.
②Ule la nueva función HTML5 FileReader.
Este objeto proporciona muchos métodos relacionados, el método más importante es ReadAsdataurl. Haz clic en mí para obtener más información.
Desventajas: el esquema de URI de datos obtenido a través del método ReadAsDataurl de FileReader generará una cadena Base64 muy larga. Si la imagen es más grande, la cadena será más larga. Si se produce el reflujo de la página, causará la degradación del rendimiento. Además, el soporte del navegador es inconsistente, y los navegadores compatibles son: FF3.6+, Chrome7+, IE10+.
③ Use Window.Url.CreateObjectUrl en lugar de FileReader, y luego use el filtro Dximagetransform.Microsoft.alphaimageLoader para ser compatible con IE.
Desventajas: debido a las consideraciones de seguridad en IE11, la dirección real del archivo seleccionado del usuario no se puede obtener a través de Value, Outerhtml y GetAttribute en el elemento Entrada [Tipo = Archivo], y solo se puede obtener.
D:/frontend/nombre de archivo. Por lo tanto, debe usar el método de document.Selection.CreaterGeCollection para obtener la dirección real.
2. Mi producción de complemento
Elegí un método más conservador, que es el tercer método para usar Window.url.CreateObjectUrl en lugar de FileReader, y luego utilizar el filtro dximagetransform.microsoft.alphaimageloader para que sea compatible con IE.
① El primer paso es el diseño HTML
<div id = "pic"> <img id = "Preview" src = "../ imgs/default.jpeg"> </div> <input type = "archivo" id = "uploadbtn" aceptación = "image/*" onchange = "setPreviewPic ()">>>
¿Quieres decir tan fácil?
② Paso de segundo, encapsulación JS enchufable.
1. Crea un objeto
Adopté principalmente el método de herencia combinado y encapsula dos métodos, a saber, la carga de imagen única y la carga de imágenes múltiples. Porque ya sea cargar una sola imagen o cargar una sola imagen, debe pasar y cargar el botón de entrada, la etiqueta IMG, Div envuelto en IMG y el valor máximo de la imagen única, en KB. Por lo tanto, estos cuatro parámetros deben pasarse al crear el objeto de imagen de carga. El método para crear este objeto es el siguiente:
var setPreviewPic = function (fileObj, preview, picrap, maximgSize) {this.fileBj = fileObj; this.preview = preview; this.picwrap = picrap; this.maximgsize = maximgSize;}2. Defina el patrón de coincidencia
Debido a que está cargando imágenes, además de agregar aceptación = "imagen/*" a la entrada y hacer restricciones preliminares, también se necesita una regularidad JS para determinar si es una imagen a través de la detección de rutas. Así que defina este patrón en prototipo para su uso en dos métodos:
SetPreviewPic.prototype.pattern = new Regexp ('/. (JPG | PNG | JPEG)+$', 'I');3. Defina el método
Lo principal es determinar si el entorno es más bajo que IE11 y escribir dos tipos de soluciones. El primero es obtener una vista previa directamente en la imagen cambiando el SRC de IMG, y el segundo es lograr el efecto de vista previa a través de filtros bajo la versión inferior de IE.
FF, Chrome, IE11 o superior: (El código para obtener una vista previa de varias imágenes se publica aquí)
<span> if (maxpics) {</span> <br> if (this.fileobj.files && this.fileBj.files [0]) {var imgs = this.picwrap.querySelectorAll ('img'); // Encuentra cuántas imágenes ya están en el DOM var num = imgs.length; var html = this.picwrap.innerhtml; if (número (num) <número (maxpics)) {// juzga si se excede el límite de carga máximo si (num == 1 && (! imgs [0] .classlist.contains ('newload'))) {// la primera imagen predeterminada html = '';} if (this.pattern.test (fileobj.files [0] .name)) {if (judogesize (fileobj.files [0] .size/1024, this.maximgSize)) {// juzga si el tamaño de la imagen excede el límite html = '<img style = "margen: 5px; ancho: '+ancho+' px; altura: '+altura+' px;" src = '+window.url.createObjectUrl (this.fileBj.files [0])+' /> '+html; this.picwrap.innerhtml = html;} else {alerta ('la imagen que cargó es demasiado grande!');}} else {alert ('lo que cargó no parece ser una imagen, por favor, verifíquela!');}} else {alert ('cargar en la mayoría de los'+maxpics+'pics!');}}}}}}}}}}}}}}}}}En IE11, use filtros para lograr el efecto:
var nums = this.picwrap.childnodes.length; // Porque QuerySelectorall y otros métodos no son compatibles a continuación IE6, podemos juzgar si (nums <maxpics+2) por la longitud de los nodos infantiles si (nums <maxpics+2) {// la adición de 2 aquí es porque hay una imagen predeterminada y la duración de los niños de los niños será 1 más. if (document.selection) {var imgsrc = document.selection.createrange (). text; var image = new image (); image.src = imgsrc; filesize = image.filesize; if (juzgesize (image.filesize/1024, this.maximgsize)) {// El tamaño del div debe establecerse en IE var ele = document.createElement ('div'); ele.style.width = width+'px'; ele.style.height = altura+'px'; ele.style.filter = "progid: dximagetra nsform.microsoft.alphaimageloader (dimensionmethod = escala, src = '"+imgsrc+"') "; intente {this.picwrap.appendChild (ele);} catch (e) {alerta ('the the imagen que sube es incorrecta, ¡seleccione nuevamente! '); return false;} this.preview.style.display = 'none'; document.selection.empty ();} else {alerta ('La imagen que cargó es demasiado grande!');}}En este punto, ¡está hecho!
uso:
<script type="text/javascript" src="../js/singlePic.js"></script><script>var fileObj=document.getElementById('uploadBtn');var preview=document.getElementById('preview');var picWrap=document.getElementById('pic');fileObj.onchange=function(){var obj=new SetPreviewPic (fileObJ, Preview, PicWrap, 100); // Definir el objeto de imagen de carga, los parámetros son el botón de entrada para cargar la imagen, el paquete de etiqueta IMG, la división en IMG y el valor máximo de la foto, la unidad es KBOBJ.uploadsinglepic (200,250); // Subcentsinglepics (200,250,250,250,2); // Capacidades de carga (200,250,2); // Capacidades de carga (200,250,2); // Capacidades de carga (200,250,2); // Capacidades de carga (200,250,2); // Capacidades de carga (200,250,2); // Sube múltiples imágenes, los parámetros son el ancho, la altura y el número máximo de cargas} </script>Lo anterior es el conocimiento relevante sobre la producción de complemento de vista previa de imagen JS (compatible con IE6) presentada por el editor. Espero que te sea útil. Si tiene alguna pregunta, déjame un mensaje. ¡El editor le responderá a tiempo!