La carga de imágenes es una función ordinaria, y la vista previa de imagen es una subcunción indispensable en la función de carga. Antes de esto, solía suscribirme al evento Onchange del elemento Entrada [Tipo = File], una vez que se cambia la ruta, la imagen se carga en el servidor y luego se obtiene la ruta de la imagen y el valor se asigna al elemento IMG. Independientemente de la solución al envío de archivos asíncronos, es limpiar imágenes de vista previa temporal en el lado del servidor, lo que ha aumentado la carga de trabajo.
Accidentalmente encontré la información relevante sobre la vista previa de imagen frontal pura de MDN, y luego la resolví y la grabé para referencia futura.
1. Preparación 1──Filerader
FileReader es una nueva característica de HTML5 para leer datos de blob y tipos de archivos. El uso específico es el siguiente:
(1). Método de construcción
var fr = new FileReader ();
(2). Atributos
ReadyState: El tipo no es firme, el estado actual de la instancia de FileReader (vacío-0, no se han cargado datos todavía; cargando-1, los datos se cargan; realizados-2, todas las solicitudes de lectura se han completado), de solo lectura.
Resultado: el contenido del archivo se lee, de solo lectura.
Error: el tipo es domerror, que indica un error que ocurre al leer el archivo, de solo lectura.
(3). Método
abort (): aborta la operación de lectura y establezca ReadyState para hacer. Cuando no se realiza una operación de lectura, llamar a este método lanzará una excepción DOM_FILE_ABORT_ERR.
ReadAsArrayBuffer (Blob Blob): Datos de lectura, el atributo de resultado se establece en el tipo de ArrayBuffer
readEteText (blob blob [, encoding = 'utf-8']): datos de lectura, el atributo de resultado se establece en el tipo de cadena
ReadAsBinaryString (Blob Blob): los datos de lectura, el atributo de resultados se establece en los datos binarios originales
ReadAsDataurl (BLOB BLOB): Datos de lectura, el atributo de resultados se establece en el formulario de esquema URI de datos (para más detalles, visite "JS Magic Hall: Introducción al esquema de URI de datos")
(4). Evento
Onload: activado después de leer los datos con éxito
OneError: activado cuando se lanza una excepción al leer datos
OnloadStart: activado antes de leer datos
onLoadend: activado después de leer datos, activado después de Onload o onError
Onabort: activado después de abortar la lectura
OnProgress: activado periódicamente durante la lectura
(5). Soporte del navegador
FF3.6+, Chrome7+, IE10+
2. Preparación 2──Dximagetransform.Microsoft.alphaimageloader Filtro
(1). Función: la función principal es procesar transparentemente las imágenes (es decir, 5.5 ~ 6 no admite PNG transparente)
(2). Cómo usar en estilos
#Preview {filtro: progid: dximagetransform.microsoft.alphaimageloader (dimensionMethod = scale, src = "dummy.png");}(3). Cómo usar en JS
Var Preview = document.getElementById ('Preview'); Preview.style.filter = Preview.CurrentStyle.Filter + "; progid: dximagetransform.microsoft.alphaimageLoader (dimensionador = escala, src = 'dummy.png')"; previsual.filters.item ("dximagetransform.microsoft.alphaimageloader"). Src = "dmymy1.png";(4). Atributos
habilitado: opcional, configurar si el filtro está activado. Rango de valor verdadero (predeterminado), falso
Dimensionamiento del tamaño: opcional establece cómo se muestra la imagen de acción de filtro dentro del límite del contenedor, el cultivo de rango de valor (corte la imagen para que se ajuste al tamaño del contenedor), imagen (valor predeterminado, aumente o disminuya el tamaño del contenedor para que se ajuste al tamaño de la imagen), escala (escala la imagen para ajustar el tamaño del contenedor)
SRC: Requerido, use URL absoluta o relativa para señalar la imagen de fondo. Cuando la URL es la dirección local de la computadora del usuario, se lanzará una excepción que no permite el acceso al sistema de archivos local cuando el SRC del elemento IMG sea la dirección local de la computadora del usuario.
Implementación
A continuación, usamos el ReadAsdataurl de FileReader para obtener el esquema de URI de datos para implementar la función de vista previa de imagen, y usamos el filtro dximagetransform.microsoft.alphaimageloader para rebajar.
Fragmento HTML:
<style type = "text/css">#Preview {Width: 100px; Altura: 100px;} </style> <!-[If LTE IE 9]> <style tipo = "text/css"> #preview {filtre: progid: dximagetransform.microsoft.alphaimageloader (dimensionmethod = scale); } </ystye> <JS Fragment:
var priew View = function (el) {var pv = document.getElementById ("vista previa"); // ie5.5 ~ 9 use filtros if (pv.filters && tipoof (pv.filters.item) === 'function') {pv.filters.item ("dximagetransform.microsoft.alhaimageloader"). Src = el.value; } else {// otros navegadores e IE10+ (los filtros no admiten) use FileReader var fr = new FileReader (); FR.OnLOAD = function (evt) {var pvimg = new image (); pvimg.style.width = pv.offsetwidth + 'px'; pvimg.style.height = pv.offsetheight + 'px'; pvimg.src = evt.target.result; pv.removechild (0); PV.AppendChild (PVIMG); }; Fr.Readasdataurl (el.files [0]); }};4. Pit
Debido a que IE11 ha realizado consideraciones de seguridad, es imposible obtener la dirección real del archivo seleccionado del usuario a través del valor, externo y getAttribute en el elemento Entrada [Type = File], y solo puede obtener el nombre C:/ falsepath/ archivo. Por lo tanto, si se usa IE11, pero el modo de texto se establece en debajo de 10, no hay forma de lograr la vista previa de la imagen.
SOLUCIÓN 1 ──Add esta oración debajo de la etiqueta de cabeza: <meta http-oquiv = "x-ua compatible" content = "ie = bord">. Esto le dirá a IE que la versión más alta del IE actual se puede usar para analizar y representar páginas web de forma predeterminada.
SOLUCIÓN 2 ── Use documento.selection.CreaterGeColleciton () para obtener la dirección real. La operación específica es la siguiente:
// Suponga que FileEL es el elemento [type = file] fileEl.select (); var filepath = document.select.createrGeCollection () [0] .htmlText;
5. Suplemento: use Window.url.CreateObjectUrl en lugar de FileReader
El esquema 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. La solución es la siguiente:
1. La etiqueta IMG vista previa utiliza el posicionamiento absoluto para salir del flujo de documentos normal, que no tiene nada que ver con otros elementos del documento, y no afectará el rendimiento cuando se refleje.
2. Use Window.URL.CreateObjectUrl (Blob Blob) para generar enlaces de datos.
var createObjectUrl = function (blob) {Ventana de retorno [Window.webkiturl? 'webkiturl': 'url'] ['createObjectUrl'] (blob);};Nota: El enlace de datos generado por Window.url.CreateObjectUrl es exclusivo de la memoria, por lo que si lo usa de vez en cuando, debe llamar a Window.URL.RebOOKECTUXTURL (Domstring Objurl) para liberar la memoria. El contenido también se lanzará automáticamente cuando la página esté actualizada.
var resuelveObjectUrl = function (blob) {window [window.webkiturl? 'webkiturl': 'url'] ['revokeObjectUrl'] (blob);};Lo anterior se trata de este artículo, espero que sea útil para el aprendizaje de todos.