HTML5 implementa funciones de carga de imágenes únicas y múltiples

Prefacio

Hoy hablamos de carga de imágenes, única o múltiple. Hoy en día, existen innumerables complementos de carga de imágenes importantes, como: verupload.js de Jquery, carga de archivos jQuery, Uploadify, jQuery.filter, etc. Pero. No hablaremos de los complementos mencionados anteriormente hoy, echemos un vistazo a cómo usar FileReader en HTML5 para realizar vistas previas, eliminar, cargar y otras funciones de imágenes únicas y múltiples. Echemos un vistazo al efecto después de la implementación:

Este es el botón en el que el usuario hace clic. Nuestra oración más importante es tipo de entrada = archivo y se proporciona un atributo múltiple, que puede satisfacer las necesidades de cargar varias imágenes.

 <div class=form-group form-row> <label class=col-sm-2 control-label uText>Álbum del club</label><div class=row> <div class=col-xs-10 col-sm- 8 mTop5> <etiqueta <tipo de entrada=archivo aceptar=imagen/* nombre=ClubImagesUpload id=ClubImagesUpload clase=ocultar múltiple=múltiple> <img src=/Images/registerNewSite/btn_addimg.png class=addImg/> </label> </div> </div></div>

El área siguiente se utiliza para la vista previa de la imagen.

 <div class=form-group form-row id=preViewMore><div class=row> <div class=col-xs-9> <div id=clubInputImagePreview class=col-sm-9 img-preview img-preview-sm </div> </div> </div></div>

¿Qué? Incluso tienes que mirar el estilo para ver si sigue siendo humano (sonrisa irónica)

Primero, analicemos el html anterior. Usamos una etiqueta para envolver la entrada y una etiqueta img. Esperamos que al hacer clic en la imagen + en la representación, aparezca un cuadro de diálogo para seleccionar fotos. la etiqueta es una etiqueta primero. Haga clic en el evento:

 $(#btnClubImg).click(function() { //TODO Algo});

Veámoslo a continuación, porque queremos obtener el archivo cargado y nuestro archivo está principalmente en la entrada, por lo que primero obtenemos la etiqueta de entrada:

 $(#btnClubImg).click(function() { var $input = $(#ClubImagesUpload); console.log($input);//Imprimir el elemento actual});

Imprimamos la etiqueta del elemento de entrada actual para ver cuál es.

Cuando expandimos el primer elemento, encontraremos que la longitud en los archivos es 0.

Bien, continuemos con el análisis, porque queremos poder obtener el archivo seleccionado actualmente cuando cambia el cuadro de entrada. En pocas palabras, cuando se selecciona un archivo, podemos obtener el archivo seleccionado actualmente. la entrada de texto en el cuadro de entrada. Por lo tanto, después del análisis, sabemos que necesitamos agregar un evento de cambio a la etiqueta de entrada:

 $(#btnClubImg).click(function() { var $input = $(#ClubImagesUpload); console.log($input); $input.on(change, function () { console.log(this);// Imprime el elemento actual modificado});});

Echemos un vistazo y veamos qué hay dentro del elemento de entrada modificado:

Aquí se puede ver claramente que hemos obtenido la imagen seleccionada, incluido el último evento de modificación, el nombre de la imagen, el tamaño y el tipo de imagen (con el tipo de archivo, podemos juzgar si el usuario actual selecciona una imagen, ¿verdad? (sonrisa entrecerrando los ojos) )) Nuevamente, esto es para un solo archivo. Si se trata de varios archivos, habrá varios archivos.

Mirando hacia abajo, podemos ver en la impresión que tenemos la información del archivo que queremos en el elemento archivos de la etiqueta de entrada, solo necesitamos obtenerla:

 var archivos = this.files; var longitud = archivos.longitud;

De esta manera, podemos obtener todos los archivos y la cantidad de archivos. Entonces aquí viene la pregunta si seleccionamos varios archivos, ¿qué pasa si los generamos uno por uno y los mostramos en la página? Cuando viste las cuatro palabras marcadas arriba, ¿dos palabras aparecieron en tu mente? ciclo

 $.each(archivos, función (clave, valor) { //TOTO Algo });

Al recorrer los archivos obtenidos anteriormente, podemos obtener la información de cada archivo por turno. De esta manera, no solo puedes generarlos uno tras otro, sino que, si quieres, también puedes enviarlos al cielo ~

 var fileReader = new FileReader();//Crear una instancia de un objeto FileReader var file_ = files[key];//Obtener el archivo actual if (/^image///w+$/.test(file_.type)) {// Realice una coincidencia regular en el archivo actual para ver si es la imagen seleccionada fileReader.onload = function() {// Se llama cuando se completa la operación de lectura} }

Es necesario ampliar los puntos de conocimiento de FileReader:

FileReader se utiliza principalmente para leer el contenido del archivo en la memoria. A través de una serie de interfaces asincrónicas, se puede acceder a los archivos locales en el hilo principal.

Al utilizar objetos FileReader, las aplicaciones web pueden leer de forma asincrónica el contenido de los archivos (o buffers de datos sin procesar) almacenados en la computadora del usuario. Puede usar objetos File u objetos Blob para especificar los archivos o datos que se procesarán.

Volviendo al tema, pudimos obtener el archivo y obtener la devolución, por lo que en este momento, solo necesitamos mostrar el resultado devuelto.

$(#clubInputImagePreview).css(background-image, url( + this.result + ));

Imprimamos este resultado para ver cuál es:

No hace falta decir que la imagen se convierte al formato de datos Base64. Finalmente, llamamos a readAsDataURL para leer el contenido del archivo y representarlo como una cadena de datos:url.

fileReader.readAsDataURL(value);

De esta manera, puede obtener una demostración simple de carga de imágenes, pero no es definitiva porque aún necesita agregar muchos negocios. Por ejemplo: después de obtener una imagen de vista previa, la etiqueta actual estará ocupada. Si realiza un bucle la próxima vez y usa la etiqueta original directamente, la imagen anterior definitivamente será reemplazada. Entonces este definitivamente no es el efecto que queremos. poder mostrarlo en secuencia, en lugar de reemplazar la pantalla. Entonces, todavía necesitamos hacer algunos procesamientos:

 $(#clubInputImagePreview).css(background-image, url( + this.result + ));//Utilice apend para agregar un nodo secundario bajo el elemento actual $(#clubInputImagePreview) .append(<img src='/Images / RegisterNewSite/btn_r_del.png' class='clubsImage' id='ImgRemove' />);//Utilice after para agregar un nodo hermano al nodo hermano actual $(#clubInputImagePreview).after( <div id='clubInputImagePreview1' class='col-sm-9 img-preview img - vista previa-sm delImg' >>div>);

Luego, cuando agregamos la imagen eliminada, también debemos darle un evento de clic para que nuestra área de vista previa actual desaparezca:

 $(#ImgRemove).click(function () { $(this).parent().remove();});

Al final, encontrará que el resultado no es el que queremos. Esto se debe a que la ID actual todavía está allí, por lo que no se puede realizar el siguiente paso. Solo necesitamos eliminar la ID del elemento actual y luego agregar una. elemento con el mismo ID, por lo que el navegador pensará que se trata de un elemento nuevo:

 $input.removeAttr(id); var newInput ='<tipo de entrada=archivo aceptar=imagen/* nombre=ClubImagesUpload id=ClubImagesUpload class=hide multiple=multiple>'; $(this).append($(newInput));

El código JS completo final es el siguiente:

 var intP = 0; $(#btnClubImg).click(function() { var $input = $(#ClubImagesUpload);// console.log($input); $input.on(cambio, función () {// console.log(this); var files = this.files; var length = files.length si (intP > 8) {layer.msg('No más imágenes~', {}); retorno } $.each(archivos, función (clave, valor) { var fileReader = new FileReader(); var file_ = archivos[clave]; if (/^image///w+$/.test( file_.type)) { fileReader.onload = function() { if (intP > 8) { Layer.msg('No más imágenes ~', {}); intP == 0) { console.log(este.resultado); $(#clubInputImagePreview).css(imagen de fondo, url( + this.result + )); $(#clubInputImagePreview) .append( <img src=' /Images/registerNewSite/btn_r_del.png' class='clubsImage' id='ImgRemove' />); $(#clubInputImagePreview).after( <div id='clubInputImagePreview1' class='col-sm-9 img-preview img-preview-sm delImg'></div>); else { $(#clubInputImagePreview + parseInt(intP) + ).css(imagen de fondo, url( + this.result + )); $(#clubInputImagePreview + parseInt(intP) + ).append( <img src='/Images/registerNewSite/btn_r_del.png' class='clubsImage' id='ImgRemove + parseInt(parseInt( 1) + parseInt(intP)) +' />); $(#clubInputImagePreview + parseInt(intP) + ).after( <div id='clubInputImagePreview + parseInt(parseInt(1) + parseInt(intP)) + 'class='col-sm-9 img-preview img-preview- sm delImg' >>div>); } si (clave == 0 && intP == 0) { $(#ImgRemove).click(function () { $(this).parent().remove(); } } else { $(#ImgRemove + parseInt(parseInt(1) + parseInt(intP)) + ) .click(function () { $(this).parent().remove(); } } intP += parseInt(1 }); fileReader.readAsDataURL(value); } else {layer.msg(Error de formato<br/>Seleccione un archivo de imagen}); archivo aceptar=imagen/* nombre=ClubImagesUpload id=ClubImagesUpload clase=ocultar múltiple=múltiple>'; $(this).append($(newInput) });

Lo anterior es la implementación HTML5 de las funciones de carga de imágenes únicas y múltiples introducidas por el editor. Espero que le resulte útil. Si tiene alguna pregunta, déjeme un mensaje y el editor le responderá a tiempo.