Cómo implementar la carga asincrónica de imágenes en Java WebApp, primero comprenda los siguientes problemas:
1. Sube la imagen;
2. Vista previa de carga de imagen;
3. Cargue la imagen y cambie la dirección y agréguela a la base de datos de manera asincrónica;
Contenido principal <Br /> Este ejemplo utiliza principalmente el código Pure HTML Front-end y JavaScript como herramientas para consultar los ejemplos de código de demostraciones que implementan la carga de imágenes:
(1) Haga clic en el código DIV para cargar la imagen:
<div id = "div1"> <input type = "file" id = "elegir" aceptación = "imagen/*" múltiple> <a id = "cargar"> cargar la imagen </a> <a onClick = "selectPhoto ();"> Seleccione de la galería </a> <a id = "back"> cancelar </a> </div>
(2) Código JavaScript
<script type = "text/javaScript"> // Obtenga el elemento de formulario de entrada de la imagen cargada var fileCooser = document.getElementById ("elegir"); // Crear lienzo para comprimir la imagen var canvas = document.createElement ("lienzo"); // Obtener el atributo visual de Canvas var ctx = Canvas.getContext ('2d'); // lienzo de mosaico var tcanvas = document.createElement ("lienzo"); var tctx = tcanvas.getContext ("2d"); // tamaño de lienzo var maxSize = 100 * 1024; // cargue la imagen Click Event $ ("#upload"). On ("hacer clic", function () {fileChooser.click ();}) .on ("touchStart", function () {// agregue el atributo de elemento $ (this) .addclass ("touch");}) .on ("touchend", function () {// eliminar el elemento atributo $ (this). }); // El elemento cambia FileCooser.onchange = function () {// Si la selección está vacía, devuelva la operación if (! This.files.length) return; // Cree la matriz de imágenes cargadas var archivos = array.prototype.slice.call (this.files); // Cuando el número es mayor que 1 imagen, operación inversa, establecido aquí de acuerdo con los requisitos; El lado de la PC puede cargar varias imágenes a la vez y seleccionar una en el lado móvil, y solo se puede obtener una vista previa de una página. Como es una terminal móvil, se realiza este juicio. if (files.length> 1) {alert ("Solo 1 imagen se puede cargar a la vez"); devolver; } // Transferir la matriz de archivos de imágenes cargadas, puede tomarlo sin atravesar. files.ForEach (function (file, i) {// juzga formato de imagen if (! /// (?: jpeg | png | gif) /i.test (file.type)) return; var lector = new FileReader (); var li = document.createElement ("li"); // obtiene el tamaño de imagen var = file.size/1024> 1024? (~ ~ ~ ~ ~ ~ ~ ~ ~ ~ 10 * (10 * (10 *. 1024)/10 + "MB": ~~ (File.Size/1024) + "Kb"; this.result; var img = new Image(); img.src = result; //The image display $(li).css("background-image", "url(" + result + ")"); //If the image size is less than 100kb, upload directly if (result.length <= maxsize) { img = null; upload(result, file.type, $(li)); return; }// Después de que se cargue la imagen, comprimirla y luego cargarla if (img.complete) {Callback (); }); }; // Lo siguiente está relacionado con la compresión de imagen; // Use el lienzo para comprimir (img) {var initsize = img.src.length; Var ancho = img.width; Var altura = img.Height; // Si la imagen es más grande a cuatro megapíxeles, calcule la relación de compresión y presione el tamaño de menos de 4 millones de relación VAR; if ((ratio = ancho * altura / 4000000)> 1) {ratio = math.sqrt (ratio); ancho /= relación; altura /= relación; } else {ratio = 1; } canvas.width = width; Canvas.Height = altura; // extender el fondo ctx.fillstyle = "#fff"; ctx.fillrect (0, 0, Canvas.Width, Canvas.Height); // Si el píxel de la imagen es mayor de 1 millón, use mosaico para dibujar un recuento var; if ((count = ancho * altura / 1000000)> 1) {count = ~~ (math.sqrt (count) + 1); // Calcule cuántos mosaicos se dividirán en // Calcule el ancho y la altura de cada mosaico var nw = ~~ (ancho /recuento); var nh = ~~ (altura / recuento); tcanvas.width = nw; tcanvas.height = nh; for (var i = 0; i <count; i ++) {for (var j = 0; j <count; j ++) {tctx.drawImage (img, i * nw * relación, j * nh * relación, relación nw *, relación nh *, 0, 0, nw, nh); ctx.drawimage (tcanvas, i * nw, j * nh, nw, nh); }}} else {ctx.drawimage (img, 0, 0, ancho, altura); } // Realizar compresión mínima var ndata = Canvas.todataurl ('Image/jpeg', 0.1); console.log ('antes de la compresión:' + initsize); console.log ('después de la compresión:' + ndata.length); console.log ('tasa de compresión:' + ~~ (100 * (initsize - ndata.length) / initsize) + "%"); tcanvas.width = tcanvas.height = canvas.width = canvas.height = 0; devolver nData; } // Cargue la imagen, convierta la imagen Base64 en un objeto binario, llévelo en FormData para cargar la función de carga (BasSSTR, Tipo, $ li) {var text = window.atob (basest.split (",") [1]); var buffer = new Uint8Array (text.length); var prime = 0, loop = null; for (var i = 0; i <text.length; i ++) {buffer [i] = text.charcodeat (i); } var blob = getBlob ([buffer], type); var xhr = new xmlhttprequest (); var formData = getFormData (); formdata.append ('cargar', blob); // Solicitud asíncrona para cargar imágenes del complemento KindEditor JSP Página XHR.Open ('Post', '<%= request.getContextPath ()%>/Kindeditor/jsp/upload_json.jsp'); xhr.onreadyStateChange = function () {if (xhr.readyState == 4 && xhr.status == 200) {// Devuelve la dirección de imagen en el lado del servidor var face_img = xhr.ResponseText; var id = $ ("#arid"). Text (); // Agregue la imagen de la imagen $ .AJAX ({type: "post", // solicitar asynCronamente la clase de acción de los Struts para insertar la dirección de imagen en la url de la base de datos: "add_article_faceurl.action", dataType: "json", data: "faceUrl ="+face_img+"& id ="+id, async: true, s. Imagen en la base de datos y almacenarla en el área oculta de la página $ ("#arid"). Text (msg); }}; // Pantalla de progreso de carga simulada // Progreso de envío de datos, el primer 50% muestra el progreso xhr.upload.adDeventListener ('progreso', function (e) {if (loop) return; prime = ~~ (100 * e.loaded/e.total)/2; $ li.find (". MockProgress (); // Buscar 50% de la función de progreso de simulación de datos MockProgress () {if (loop) return; loop = setInterval (function () {cement ++; $ li.find (". progreso span"). css ('width', prime+"%"); if (pecent == 99) {clearInterval (bucle);}}, 100); } xhr.send (FormData); } / ** * Obtenga la compatibilidad de la redacción de objetos blob * @param buffer * @param format * @returns { *} * / function getBlob (buffer, format) {try {return new blob (buffer, {type: format}); } catch (e) {var bb = new (Windows.BlobBuilder || Window.WebkitBlobBuilder || Window.MsBlObBuilder); buffer.ForEach (function (buf) {bb.append (buf);}); return bb.getBlob (formato); }}} / ** * get formdata * / function getFormData () {var isNeedShim = ~ navigator.useragent.indexof ('android') && ~ navigator.vendor.indexof ('google') &&! ~ Navigator.useragent.indexof ('Chrome') && navigator.useragent.match (/applewebkit // (/d+)/). pop () <= 534; ¿RETURN ISNEDSHIM? nuevo FormDataShim (): nuevo FormData (); } / *** FormData Patch, Patch Android Máquinas que no admiten FormData Subiendo blobs* @Constructor* / function formDataShim () {console.warn ('usando formdata shim'); var o = this, Parts = [], Boundary = Array (21) .Join ('-') + ( + new Date () * (1e16 * Math.random ())). ToString (36), Oldsend = xmlhttprequest.prototype.send; this.append = function (nombre, valor, nombre de archivo) {parts.push ('-' + límite + '/r/ncontent-disisposition: form-data; name = "' + name + '"'); if (value instanceOf blob) {parts.push ('; filename = "' + (filename || 'blob') + '"/r/ncontent-type:' + value.type + '/r/n/r/n'); partes.push (valor); } else {parts.push ('/r/n/r/n' + valor); } parts.push ('/r/n'); }; // anular xhr send () xmlhttprequest.prototype.send = function (val) {var fr, data, oxhr = this; if (val === O) {// Agregar las partes de cadena de límite final.push ('-' + límite + '-/r/n'); // crea el blob data = getBlob (piezas); // Configure y lea el blob en una matriz para ser enviado fr = new FileReader (); Fr.Onload = function () {Oldsend.call (OxHr, Fr.Result); }; Fr.Onerror = function (err) {throw err; }; Fr. ReadasArrayBuffer (datos); // Establezca el tipo de contenido de multipart y boudary this.setRequestHeader ('content-type', 'multipart/form-data; boundary =' + boundary); Xmlhttprequest.prototype.send = oldsend; } else {Oldsend.call (this, val); }}; } </script>(3) El código relacionado con la página JSP de la imagen de carga del complemento KindEditor.
<%@ page lenguaje = "java" contentType = "text/html; charset = utf-8" PageEncoding = "UTF-8"%> <%@ page import = "java.util.*, java.io.*"%> <%@ page import = "java.text.impledateFormat"%> <%@ page@ page import = "org.apache.commons.fileUpload.*" %> < %@ page import = "org.apache.commons.fileupload.disk.*" %> < %@ page import = "org.apache.commons.fileupload.servlet.*" %> < %@ page import = "org.apache.struts2.dispatcher.multipart.multiparTrequestWrapper"%> <%@ page import = "org.json.simple. *"%> <%/** * KindEditor JSP * * Este programa JSP es un programa de demostración, y se recomienda no usarlo directamente en proyectos reales. * Si seguramente usará este programa directamente, confirme cuidadosamente la configuración de seguridad relevante antes de usarla. * * /// File Save Directory Path String String SavePath = PageContext.getServletContext (). "D:/www/qslnadp/adp/webroot/bindeditor/adjunte/"; // archivo guarda directorio urlString saveUrl = request.getContextPath () + "/adjunto/"; // Define la extensión de archivo que se permite que se cargue en HashMap <string> string> extmap = hahMap <string, string> (); extmap ("," Image, "Image," Image. "gif, jpg, jpeg, png, bmp, blob"); extmap.put ("flash", "swf, flv"); extmap.put ("medios", "swf, flv, mp3, wav, wma, wmv, mid, avi, mpg, asf, rm, rmvb"); extmap.put ("archivo", "archivo", "archivo", "," archivo ",", "," archivo " "doc, docx, xls, xlsx, ppt, htm, html, txt, zip, rar, gz, bz2"); // tamaño de archivo máximo largo maxsize = 1000000; respuesta.setContentType ("text/html; charset = utf-8"); if (! ServletFilePropLoad. out.println (getError ("Seleccione el archivo")); return;} // Verifique el archivo de directorio uploadDir = nuevo archivo (SavePath); if (! uploadDir.isDirectory ()) {out.println (getErRor ("uploadDir.canWrite ())); return;} // verifique los permisos de escritura de directorio if (! uploadDir.canwrite ()) {out.Println (getRorRor (" uploadDir.No Write Permissions "); request.getParameter ("dir"); return;} // Crear carpeta SavePath + = DirName + "/"; Saveurl + = DirName + "/"; File SavedIrFile = nuevo archivo (SavePath); if (? (. wrapper.getFiles ("cargar") [0]; // verifique el tamaño del archivo if (file.length ()> maxSize) {out.println (getError ("El tamaño del archivo de carga excede el límite.")); retorny;} // verifique la cadena de extensión fileExt1 = filename1.substring (filename1.lastIndexof (".") + 1) .tolowercase (); // refactor el nombre de archivo de carga simplifice -format df1 = new SimpledAceformat ("yyyyMMDDHHMMMSS"); String newFileName1 = df1.format (") (")) "_" + new Random (). NextInt (1000) + "." + FileExt1; byte [] buffer = new Byte [1024]; // Obtener el archivo de salida de archivo FileOutputStream fos = new FileOutputStream (SavePath + NewFileName1); String URL = SavePath + NewFileName1; Out.Println (URL); // Obtenga el archivo de archivo actual en Memory inputStream IN = New FileNputam (File (File); Pruebe {Pruebe {Pruebe {Pruebe {Pruebe {Pruebe {Pruebe {Pruebe; while ((num = in.read (buffer))> 0) {fos.write (buffer, 0, num); }} catch (Exception e) {E.PrintStackTrace (System.err);} Finalmente {in.close (); fos.close ();}%> <%! Private String getError (mensaje de cadena) {jsonObject obj = new jsonObject (); obj.put ("error", 1); obj.put ("mensaje", mensaje); devolver obj.tojsonstring ();}%> ( 4) El paquete jar para cargar imágenes de Kindeditor es el siguiente
A. Commons-FileUpload-1.2.1.Jar
B. Commons-IO-1.4.Jar
C.json_simple-1.1.Jar
No hay código JS sobre el Kindeditor utilizado aquí. Para obtener más detalles, consulte: Kinditor implementa la función de carga automática de imágenes.
(5) El DIV para cargar imágenes de Kindeditor es el siguiente
<div id = "div2"> <ul> <li id = "wy"> <img style = "altura: 100%; ancho: 100%; posición: absoluto; superior: 0px;" src = "<%= request.getContextPath ()%>/shequ/images/index.png;" > </li> </ul> </div>
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.