La función de vista previa de carga de imagen se usa principalmente para obtener una vista previa de un efecto antes de la carga de la imagen. Actualmente, los métodos convencionales incluyen principalmente JS, JQuery y Flash Implementación, pero generalmente usamos JS para implementar la función de vista previa de carga de imagen. Echemos un vistazo a un ejemplo a continuación.
principio:
Se divide en dos pasos: cuando la entrada de cargar la imagen se activa y se selecciona la imagen local, la URL (URL del objeto) del objeto se cargará; Asigne la URL de objeto al atributo SRC de la etiqueta IMG preescritada para mostrar la imagen.
Aquí, necesitamos comprender el objeto Archivo, el objeto Blob y Windows.URL.CreateObjectUrl () en JavaScript.
Objeto de archivo:
El objeto del archivo se puede usar para obtener información sobre un archivo, y también se puede usar para leer el contenido del archivo. En general, el objeto de archivo es del objeto Filelist devuelto por el usuario después de seleccionar un archivo en un elemento de entrada, o puede ser un objeto DataTransfer generado por operaciones gratuitas de arrastrar y soltar.
Echemos un vistazo a obtener el objeto Filelista:
La copia del código es la siguiente:
<script type = "text/javaScript" src = "jquery.js"> </script>
<input id = "upload" type = "file">
<img id = "Preview" src = "">
<script type = "text/javaScript">
$ ('#upload'). Change (function () {
// Obtener el primer elemento de filelista
alert (document.getElementById ('cargar'). archivos [0]);
});
</script>
Objeto Blob:
Un objeto Blob es un objeto similar a un archivo que contiene datos sin procesar de solo lectura. Los datos en un objeto BLOB no necesariamente tienen que ser una forma nativa en JavaScript. La interfaz del archivo se basa en Blob, hereda las funciones de Blob y se extiende para admitir archivos locales en la computadora del usuario.
La URL del objeto que queremos obtener en realidad se obtiene del objeto BLOB, porque la interfaz de archivo hereda el blob. Aquí está la conversión del objeto Blob en una URL:
La copia del código es la siguiente:
<script type = "text/javaScript">
var f = document.getElementById ('cargar'). archivos [0];
var src = window.url.createObjectUrl (f);
document.getElementById ('Preview'). src = src;
</script>
compatibilidad:
El método anterior es adecuado para el navegador Chrome
Si es un navegador IE, puede usar directamente el valor de entrada en lugar de SRC
Al ver información en línea, puede usar directamente el método getAsDataurl () del objeto de archivo para obtener la URL. Ahora este método ha sido abolido. Del mismo modo, hay métodos getastext () y getAsBinary (). Echemos un vistazo a tal ejemplo.
La copia del código es la siguiente:
función getFullPath (obj) {// Obtenga la ruta completa a la imagen
if (obj) {
//es decir
if (window.navigator.useragent.indexof ("msie")> = 1) {
obj.select ();
return Docum.Selection.CreaterGe (). Text;
}
// Firefox
else if (window.navigator.useragent.indexof ("firefox")> = 1) {
if (obj.files) {
regresar obj.files.item (0) .getAsdataurl ();
}
regresar obj.value;
}
regresar obj.value;
}
}
Este código es la ruta completa para obtener la imagen del cliente.
Limitaremos su tamaño y formato
La copia del código es la siguiente:
$ ("#LoadFile"). Change (function () {
var strsrc = $ ("#loadfile"). val ();
img = nueva imagen ();
img.src = getFullPath (strsrc);
// Verifique que el formato de archivo de carga sea correcto
var pos = strsrc.lastindexof (".");
var lastName = strsrc.substring (pos, strsrc.length)
if (lastName.TOLOWERCase ()! = ".jpg") {
alerta ("El tipo de archivo que carga es" + LastName + ", la imagen debe ser de tipo jpg");
devolver falso;
}
// Verifique la relación de aspecto del archivo cargado
if (img.height / img.width> 1.5 || img.height / img.width <1.25) {
alerta ("La proporción de la imagen que carga está más allá del rango, y la relación de aspecto debe ser entre 1.25-1.5");
devolver;
}
// Verifique si el archivo cargado es de gran tamaño
if (img.filesize / 1024> 150) {
alerta ("El tamaño del archivo que carga excede el límite de 150k!");
devolver falso;
}
Entre ellos, LoadFile es la ID del archivo de entrada HTML. Después de su evento de cambio, es decir, después de seleccionar el archivo que se cargará, ¿deja que la imagen se muestre en el cuadro de imagen? Agregue el siguiente código al final del código anterior
La copia del código es la siguiente:
$ ("#Stupic"). attr ("src", getfullpath (esto));
Como se usa jQuery, compartamos un ejemplo de código escrito en jQuery:
La copia del código es la siguiente:
<html xmlns = "http://www.w3.org/1999/xhtml">
<head id = "head1">
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<script type = "text/javaScript" src = "jquery.js"> </script>
<script language = "javaScript">
$ (function () {
var ei = $ ("#grande");
ei.hide ();
$ ("#img1"). MouseMove (función (e) {
ei.css ({top: e.pagey, izquierda: e.pagex}). html ('<img style = "border: 1px sólido gris;" src = "' + this.src + '" />'). show ();
}). MouseOut (function () {
ei.hide ("lento");
})
$ ("#f1"). Change (function () {
$ ("#img1") .attr ("src", "archivo: ///"+$ ("#f1") .val ());
})
});
</script>
<style type = "text/css">
#Large {posición: Absolute; Display: Ninguno; Z-Index: 999;}
</style>
</ablo>
<Body>
<form de nombre = "form1" id = "form1">
<div id = "demo">
<input id = "f1" name = "f1" type = "file" />
<img id = "img1">
</div>
<div id = "grande"> </div>
</form>
</body>
</html>