Este artículo comparte ejemplos de JS HTML5 Multi-Picture Subpage and Preview Ejemplos para su referencia. El contenido específico es el siguiente
Aplicación principal
1. Los archivos HTML5 pueden seleccionar múltiples archivos y obtener múltiples información de archivo
2. Objeto xmlhttprequest, envíe una solicitud de transmisión HTTP
3. Coloque cada archivo en FormData para la transmisión
4. Use ReadAsdataurl para convertir directamente el contenido de la imagen en una URL, colóquelo en el SRC de la etiqueta IMG y genere imágenes previsables.
Código HTML+CSS+JS
<! DOCTYPE HTML> <HEAD> <meta http-equiv = "content-type" content = "text/html" charset = "utf-8"/> <title> test html filereader </title> <estilo type = "text/css"> html, cuerpo, encabezado, pie de página, div, ul, li, h1, h2, h3, h4, h5, h6, etiqueta, entrada, textura, p, span, un {relleno: 0; margen: 0;} img {border: 0;} em, fuerte {font-weight: normal; estilo fuente: normal;} ul {list-style: none;} h1, h2, h3, h4, h5, h6 {font-weight: normal; Font-size: 100%;} a, a: After {Text-Decoration: Ninguno;}. Photo_Wrap {Clear: Amby;}. Photo_Wrap Li {margen: 10px; Ancho: 150px; float: izquierda;}. Photo_box {altura: 150px; Ancho: 150px; desbordamiento: oculto; posición: relativa;}. Photo_box .Img1 {Height: 150px;}. Photo_box .Img2 {ancho: 150px;}. upload_result {Height: 50px;}. Btn {posición: relativo; Altura: 40px; Ancho: 100px; float: izquierda;}. Btn {altura: 40px; Línea de altura: 40px; Color: #fff; Pantalla: bloque; Border-Radius: 3px; Text-Align: Center; Color de fondo: #FF5581; / * Navegadores antiguos */ IMAGE DE SEGURIDAD: -MOZ-LINEAR-gradiente (arriba, #FA7B9C 0%, #FF5581 100%); / * Ff3.6+ */ background-image: -webkit-gradiente (lineal, superior izquierda, fondo izquierdo, color-stop (0%,#fa7b9c), color-stop (100%,#FF5581)); / * Chrome, Safari4+ */ Background-Image: -webkit-lineal-gradiente (arriba, #FA7B9C 0%, #FF5581 100%); / * Chrome10+, Safari5.1+ */ Background-Image: -O-Lineal-Dinter (arriba, #FA7B9C 0%, #FF5581 100%); / * Ópera 11.10+ */ IMAGE DE SEGURIDAD: -MS-LINEAR-gradiente (arriba, #FA7B9C 0%, #FF5581 100%); / * IE10+ */ IMAGE DE SEGURIDAD: gradiente lineal (hasta la parte inferior, #FA7B9C 0%, #FF5581 100%); / * W3c */ filtro: progid: dximagetransform.microsoft.gradient (startColorStr = '#fa7b9c', endcolorstr = '#ff5581', gradiente = 0); / * Ie6-8 */ box-shadow: 0 1px 0 RGBA (255, 255, 255, 0.3) Recuadro, 0 1px 2px rgba (0, 0, 0, 0.3);}. Btn_add_pic {ancho: 100px; Posición: Absoluto; arriba: 0; Izquierda: 0;}. Btn_upload {ancho: 100px; margen: 0 10px 10px; float: izquierda;}. btn: hover, .btn_cur {background-color: #fb99b1; / * Navegadores antiguos */ IMAGE DE SEGURIDAD: -MOZ-LINEAR-gradiente (arriba, #FB99B1 0%, #FF5581 100%); / * Ff3.6+ */ background-image: -webkit-gradiente (lineal, superior izquierda, fondo izquierdo, color-stop (0%,#fb99b1), color-stop (100%, ## ff5581)); / * Chrome, Safari4+ */ Background-Image: -webkit-lineal-gradiente (arriba, #FB99B1 0%, #FF5581 100%); / * Chrome10+, Safari5.1+ */ Background-Image: -O-Lineal-Dentient (arriba, #FB99B1 0%, #FF5581 100%); / * Opera 11.10+ */ Background-Image: -ms-Linear-Gradient (arriba, #FB99B1 0%, #FF5581 100%); / * IE10+ */ IMAGE DE SEGURIDAD: gradiente lineal (hasta la parte inferior, #FB99B1 0%, #FF5581 100%); / * W3c */ filtro: progid: dximagetransform.microsoft.gradient (startColorStr = '#fb99b1', endcolorstr = '#ff5581', gradiente = 0); / * IE6-8 */}. FILE_INPUT_WRAP {Position: Absolute; arriba: 0; Izquierda: 0; Ancho: 100px; altura: 40px;}. File_input_wrap etiqueta {ancho: 100%; Altura: 100%; Pantalla: bloque; Opacidad: 0; cursor: pointer;}. FILE_INPUT_WRAP INPUT {Opacidad: 0; Filtro: alfa (opacidad = 0);/*ie8 y debajo*/ posición: absoluto; Arriba: 7px; Derecha: 173px; cursor: puntero; Ancho: 95px;}. Photo_box .icon_pos {altura: 20px; Ancho: 20px; Pantalla: bloque; Posición: Absoluto; Derecha: 0; Bottom: 0;}. Photo_box .Loading {Height: 10px; Pantalla: bloque; Posición: Absoluto; Izquierda: 0; Abajo: 0; background-image: url (loading.gif);}. Sucess_icon {background-image: url (icons_01.png); Posición de fondo: 0 0;}. Error_icon {background-image: url (icons_01.png); Posición de fondo: -20px 0;} </style> </head> <body> <div> <a id = "j_add_pic" href = "javascript:;"> Agregar imagen </a> <div> <input type = "file" id = "file" name = "archivo" aceptación = "image/*" múltiple = "fileinfo (este)"/> <label Id = "j_je" jeame = "archivo" aceptación = "Image/*" múltiplo = "fileinfo (this)"/> <label Id = "J_ name =" File "Acept =" Image/*"múltiplo =" FileInfo (this) "/> <Label Id =" J_ name = "File" Acept = "Image/*" múltiplo = "FileInfo (this)"/> <LATCELITA = "J_Ad" J_An. </div> </iv> <a id = "j_upload" href = "javascript :;"> iniciar cargueado </a> <div id = "j_photo_wrap"> <ul> </ul> </div> </body> <script type = "text/javaScript" src = "jQuery-1.7.2.min.js"> <script> <script> <script> type = "text/javaScript"> var img_index = new Array (); function upload_img () {var j = 0; img (); función img () {// 1. Crear objeto xmlhttprequest if (img_index.length> 0) {var singleImg = img_index [j]; var xmlhttp; if (window.xmlhttprequest) {// ie7+, Firefox, Chrome, Opera, Safari xmlhttp = new xmlhttprequest; // Se corrige si para ciertas versiones específicas de los errores del navegador Mozillar (xmlhttp.overridemeType) {xmlhttp.overridemimeType ('text/xml'); }; } else if (window.activexObject) {// ie6, ie5 xmlhttp = new ActiveXObject ("Microsoft.xmlhttp"); }; if (xmlhttp.upload) {// Barra de progreso xmlhttp.upload.addeventListener ("progreso", function (e) {if (e.lenggthcomputable) {var load_percent = (e.loaded /e.total) * 100; $ ('#j_photo_wrap ul li '). Eq (j) .find ('. Carga '). CSS (' ancho ', load_percent+'%'); // 2. Función de devolución de llamada // OnreadyStateChange es la función de identificación de eventos llamada cada vez que la propiedad ReadyState cambia xmlhttp.onreadyStateChange = function (e) {if (xmlhttp.readyState == 4) {if (xmlhttp.status == 200) {var JSon = eval ('(' + xmlhttp.RescessEtextExtExtExtExtExtExtExtExtExt + '); if (json.status == 1) {$ ('#j_photo_wrap ul li'). eq (j) .find ('. upload_result'). Text (singleImg.name+'cargar completado'); $ ('#J_photo_wrap ul li'). Eq (j) .find ('. Carga'). Hide (); $ ('#J_photo_wrap ul li'). Eq (j) .find ('. Icon_pos'). AddClass ('sucess_icon'); } else {$ ('#j_photo_wrap ul li'). eq (j) .find ('. upload_result'). Text (singleImg.name+'upload fallado'); $ ('#J_photo_wrap ul li'). Eq (j) .find ('. Carga'). Hide (); $ ('#J_photo_wrap ul li'). Eq (j) .find ('. Icon_pos'). AddClass ('ERROR_ICON'); }} else {$ ('#j_photo_wrap ul li'). eq (j) .find ('. upload_result'). Text (singleImg.name+'upload fallado'); $ ('#J_photo_wrap ul li'). Eq (j) .find ('. Carga'). Hide (); $ ('#J_photo_wrap ul li'). Eq (j) .find ('. Carga'). Hide (); $ ('#J_photo_wrap ul li'). Eq (j) .find ('. Icon_pos'). AddClass ('ERROR_ICON'); } if (j <img_index.length - 1) {j ++; img (); }}}}; // 3. Establezca información de conexión // Inicialice los parámetros de solicitud HTTP, pero no envíe solicitudes. // El primer método de conexión de parámetro es, el segundo es la dirección de URL, y la tercera verdadera es una conexión asíncrona, que es asíncrona de forma predeterminada // Envía datos utilizando el método post xmlhttp.open ("post", "upload.php", true); // 4. Envíe datos, comience a interactuar con el servidor // Enviar solicitudes HTTP, usar los parámetros pasados al método Open () y la solicitud opcional pasada al método. Si es verdadero, el envío de oraciones se ejecutará inmediatamente // si es falso (sincrónico), el envío se ejecutará solo después de que regresen los datos del servidor // Get Method no requiere contenido en enviar var FormData = new FormData (); formdata.append ("fileData", singleImg); xmlhttp.send (FormData); } //}}}}; $ ('#J_upload'). Click (function () {upload_img ();}); $ ('#J_add_area'). Hover (function () {$ ('#j_add_pic'). AddClass ('btn_cur');}, function () {$ ('#j_add_pic'). Removeclass ('btn_cur');}); $ ('#J_add_area'). Click (function () {$ ('#file'). Click ();}); function reize (img) {if (img.offsetheight> img.offsetwidth) {$ (img) .removeclass ('img1'). addClass ('img2'); } else {$ (img) .removeclass ('img2'). addClass ('img1'); }} función fileInfo (fuente) {var ireg = /image//.*/i; VAR archivos = fuente.files; nombre var, tamaño, tipo; for (var i = 0, f; f = files [i]; i ++) {name = f.name; tamaño = f.size; type = f.type; if (! type.match (ireg)) {$ ('#j_photo_wrap ul'). append ('<li> <div>'+name+'no es una imagen <span> </span> <span> </span> </div> <div> </div> </li>'); } else {img_index.push (f); if (size> 1048576) {$ ('#j_photo_wrap ul'). append ('<li> <div>'+name+'es demasiado grande para generar una vista previa <Span> </span> <span> </span> </div> <div> </div> </li>'); } else {if (window.filereader) {var fr = new FileReader (); FR.OnLOAD = (function (f) {return Function (e) {$ ('#j_photo_wrap ul'). append ('<li> <div> <img onload = "resize (this);" src = ""+this.result+' "/> <span> </span> </span> <div> </iv> </li>;};};}; Fr. Readasdataurl (f); }}}}}}}; </script> </ html>PHP recibió el código de archivo (aquí solo obtiene el nombre del archivo, el tipo y el tamaño, y no se realizan otras operaciones)
<? Php $ name = $ _files ['fileData'] ['name']; $ type = $ _files ['fileData'] ['type']; $ size = $ _files ['fileData'] ['size']; $ return = array ("name" => $ name, "type" => $ type, "size" => $ size, "estado" => 1); $ return = json_encode ($ return); echo $ return ;>Problemas existentes
1. Para generar miniaturas, ReadAsdataurl tomará la memoria al leer el contenido del archivo, por lo que las imágenes grandes harán que el navegador se atasque o se bloquee.
2. La carga no se procesa en segmentación
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.