So implementieren Sie asynchrone Upload von Bildern in Java WebApp, verstehen Sie zunächst die folgenden Probleme:
1. Laden Sie das Bild hoch;
2. Bild -Upload -Vorschau;
3. Laden Sie das Bild hoch und ändern Sie die Adresse und fügen Sie es asynchron zur Datenbank hinzu.
Hauptinhalt <br /> In diesem Beispiel wird hauptsächlich reine HTML-Front-End- und JavaScript-Code als Tools verwendet, um die Code-Beispiele für Demos abzufragen, die das Bild-Uploading implementieren:
(1) Klicken Sie auf das Div -Code, um das Bild hochzuladen:
<div id = "div1"> <input type = "Datei" id = "wählen" accept = "image/*" multiple> <a id = "upload"> das Bild hochladen </a> <a onclick = "selectPhoto ();
(2) JavaScript -Code
<script type = "text/javaScript"> // das Eingabeformelement des hochgeladenen Bildes abrufen var filechooSer = document.getElementById ("wählen"); // Canvas zum Komprimieren des Bildes var canvas = document.createelement ("canvas") erstellen; // Erhalten Sie das visuelle Attribut von Canvas var ctx = canvas.getContext ('2d'); // Tile Canvas var tcanvas = document.createelement ("canvas"); var tctx = tcanvas.getContext ("2D"); // Leinwandgröße var maxsize = 100 * 1024; // Laden Sie das Bild hoch klicken Sie auf Ereignis $ ("#Upload"). On ("Click", function () {filechooser.click ();}) .on ("touchStart", function () {// Elementattribut $ $ (this) .Addclass ("Touch"); }); // Element ändert sich filechooser.onchange = function () {// Wenn die Auswahl leer ist, geben Sie die Operation zurück, wenn (! This.files.length) return; // Erstellen Sie das Array von hochgeladenen Bildern var files = array.prototype.slice.call (this.files); // Wenn die Zahl größer als 1 Bild ist, umgekehrte Operation, hier gemäß den Anforderungen festgelegt; Die PC -Seite kann mehrere Bilder gleichzeitig hochladen und auf der mobilen Seite eines auswählen, und nur eine Seite kann eine Vorschau aufnehmen. Da es sich um ein mobiles Terminal handelt, wird dieses Urteil getätigt. if (Dateien.length> 1) {alert ("Nur 1 Bild kann gleichzeitig hochgeladen werden"); zurückkehren; } // Übertragen Sie das Dateiarray von hochgeladenen Bildern, Sie können es einfach ohne Überqueren aufnehmen. Dateien.foreach (Funktion (Datei, i) {// Bildformat if (! /// (?: jpeg | png | gif) /i.test (Datei.Type)) return; var reader = new FileReäen (); var Li = document.createelement ("li"); // Die Bildgröße. 1024)/10 + "mb": ~~ (Datei.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; }// Nach dem Bild wird es geladen und laden Sie es an, wenn (IMG.Chro. }); }; // Folgendes bezieht sich auf die Bildkomprimierung; // Verwenden Sie Canvas, um zu komprimieren (img) {var initsize = img.src.length; var width = img.width; var height = img.height; // Wenn das Bild größer als vier Megapixel ist, berechnen Sie das Kompressionsverhältnis und drücken Sie die Größe auf weniger als 4 Millionen VAR -Verhältnis. if ((Verhältnis = Breite * Höhe / 4000000)> 1) {Verhältnis = math.sqrt (Verhältnis); Breite /= Verhältnis; Höhe /= Verhältnis; } else {Ratio = 1; } canvas.width = width; Canvas.Height = Höhe; // Verbreiten Sie den Hintergrund ctx.FillStyle = "#fff"; Ctx.FillRect (0, 0, Canvas.width, canvas.height); // Wenn das Bildpixel größer als 1 Million ist, zeichnen Sie die VAR -Anzahl von Fliesen. if ((count = width * height / 1000000)> 1) {count = ~~ (math.sqrt (count) + 1); // Berechnen Sie, wie viele Kacheln in die Breite und Höhe der einzelnen Kacheln unterteilt werden sollen. var nh = ~~ (Höhe / Anzahl); tcanvas.width = nW; tcanvas.height = nh; für (var i = 0; i <count; i ++) {für (var j = 0; j <count; j ++) {tctx.drawimage (img, i * nw * rettio, j * nh * rate, nw * Verhältnis, NH * -Verhältnis, 0, 0, NW, NH); ctx.drawimage (tcanvas, i * nw, j * nh, nw, nh); }}} else {ctx.drawimage (IMG, 0, 0, Breite, Höhe); } // minimale Komprimierung durchführen var ndata = canvas.todataurl ('Bild/jpeg', 0.1); console.log ('vor Komprimierung:' + initSize); console.log ('nach Komprimierung:' + ndata.length); console.log ('Komprimierungsrate:' + ~~ (100 * (initSize - ndata.length) / InitSize) + "%"); tcanvas.width = tcanvas.height = canvas.width = canvas.height = 0; kehren ndata zurück; } // Das Bild hochladen, das Basis64 -Bild in ein binäres Objekt konvertieren, es in Formdata zum Upload -Funktion (BasisESTR, Typ, $ li) {var text = window.atob (BasisESTR.Split (",") [1]) füllen; var buffer = new Uint8Array (text.length); var prime = 0, Loop = null; für (var i = 0; i <text.length; i ++) {buffer [i] = text.charCodeat (i); } var blob = getBlob ([Puffer], Typ); var xhr = new xmlhttprequest (); var formdata = getFormData (); FormData.Append ('Upload', Blob); // Asynchronische Anfrage zum Hochladen von Bildern des Senditor -Plugins JSP Seite xhr.open ('post', '<%= request.getContextPath ()%>/sorteditor/jsp/upload_json.jsp'); xhr.onReadyStatechange = function () {if (xhr.readyState == 4 && xhr.status == 200) {// RECHT Die Bildadresse auf der serveren Seite var face_img = xhr.responSetext; var id = $ ("#ark"). text (); //Asynchronously add image $.ajax({ type:"POST", //Asynchronously request Struts' action class to insert the image address into the database url:"add_article_faceurl.action", dataType:"json", data:"faceurl="+face_img+"&id="+id, async:true, success: function(msg){ //Get the id value related to the Bild in der Datenbank und speichern Sie sie in der Seite versteckter Bereich $ ("#ark"). Text (msg); }}; // Simulierte Upload -Fortschrittsanzeige // Daten zum Senden von Fortschritt, die ersten 50% Zeigt den Fortschritt xhr.Upload.adDeventListener an ('Fortschritt', Funktion (e) {if (Loop) return; prime = ~~ (100 * e.Loded/e.total)/2; $ li.find (". MockProgress (); // Suchen Sie 50% der Daten verwenden Simulation Progress -Funktion MockProgress () {if (Loop) Return; Loop = setInterval (function () {cement ++; $ li.find (". Fortschrittsspan"). CSS ('width', prime+"%"); if (pecent == 99) {ClearInterval (Loop);}}, 100); } xhr.send (FormData); } / ** * das Schreiben von Blob -Objekten abrufen * @param buffer * @param Format * @returns { *} * / function getBlob (buffer, format) {try {return New Blob (Buffer, {Typ: Format}); } catch (e) {var bb = new (window.blobbuilder || window.webkitBlobBuilder || window.msblobBuilder); buffer.foreach (function (buf) {bb.append (buf);}); return bb.getBlob (Format); } } /** * 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 isNeedshim? New FormDatashim (): New FormData (); } / *** FormData Patch, Patch -Android -Maschinen, die Formdata nicht unterstützen. var o = this, parts = [], boundary = array (21) .join ('-') + ( + neues Datum () * (1e16 * math.random ()). toString (36), OldSend = xmlhttprequest.Prototype.send; this.append = Funktion (Name, Wert, Dateiname) {parts.push ('-' + boundary + '/r/nContent-Disposition: Form-Data; name = "' + name + '"'); if (Value InstanceOf Blob) {parts.push ('; Dateiname = "' + (Dateiname || 'Blob') + '"/r/nContent-Typ:' + value.type + '/r/r/r/n'); Teils.push (Wert); } else {parts.push ('/r/n/r/n' + value); } Parts.push ('/r/n'); }; // überschreiben xhr send () xmlhttprequest.prototype.send = function (val) {var fr, data, oxhr = this; if (val === o) {// Die endgültige Grenzstring-Parts.push ('-' + boundary + '-/r/n') anhängen; // Erstellen Sie die Blob Data = getBlob (Teile); // den Blob in ein Array einrichten und lesen, das zugesandt werden kann. fr.onload = function () {oldsend.call (oxhr, fr.result); }; fr.onError = function (err) {throw err; }; Fr.readasarrayBuffer (Daten); // SetRequestHeader ('Content-Typ', 'MultiPart/Form-Data; Grenary =' + Grenary) den Multipart-Inhaltstyp und den Boudary this.setRequestheader ('Content-Type', 'Multipart/Form-Data) festlegen; Xmlhttprequest.Prototype.Send = OldSend; } else {oldsend.call (this, val); }}; } </script>(3) Das mit dem Kindeditor-Plug-In zugelassene Bild-JSP-Seiten-JSP-Seite.
<%@ page Language = "java" contentType = "text/html; charset = utf-8" pageCoding = "utf-8"%> <%@ page import = "java.util. import = "org.apache.commons.FileUpload.*" %> < %@ page import = "org.apache.commons.FileUpload.disk. Import = "org.apache.struts2.Dispatcher.multipart.multipArtraPeRestWrapper"%> <%@ page import = "org.json.simple. * Wenn Sie dieses Programm sicher direkt verwenden, bestätigen Sie bitte die relevanten Sicherheitseinstellungen vor der Verwendung sorgfältig. * * /// Datei Save Directory Path String Savepath = pageContext.getServletContext (). GetRealPath ("/") + "beigefügt/" // String Savepath = "http:////192.168.1.226:8080/qslnbase "D:/www/qslnadp/adp/webroot/sorteditor/attd/"; // Datei speichern Verzeichnis urlstring saveUrl = request. "GIF, JPG, JPEG, PNG, BMP, Blob"); extmap.put ("Flash", "Swf, flv"); extmap.put ("Medien", "swf, flv, mp3, Wav, wma, wmv, mid, avi, mpg, Asf, rmvb, rmvb");););););););););););););););););););););); "doc, docx, xls, xlsx, ppt, htm, html, txt, zip, rar, gz, bz2"); // Maximale Dateigröße lang maxSize = 1000000; Antwort.SetContType ("text/html; charSet = utf-8"); out.println (getError ("Bitte wählen Sie Datei aus.")); return;} // Verzeichnisdatei uploadDir = new Datei (SAREPADE); if (! uploaddir.isdirectory ()) {out.println (getRror ("uploaddir.canwrite ()); return;} // Überprüfung des Verzeichnisses Schreiben Sie Berechtigungen Wenn (! Uploaddir.canwrite ()) {out.println (GetError (" Uploaddir.no -Schreibversorgungen. Request.GetParameter ("Dir"); return;} // Ordner SavePath + = DirName + "/"; SaveURL + = DirName + "/"; Datei sparedirFile = new Datei (SavePath); if (! savedirFile.exists ()) {SavedirFile.mkdirs ();} SimpleDateFormat SDF = new SimpleDateFormat ("yyyymmdd"); String ymd = SDF.Format (New Date ()); SavePath + = ymd + "; . Wrapper.getFiles ("Upload") [0]; // Dateigröße if (file.length ()> maxSize) {out.println (getError ("Dateigröße hochladen, überschreitet das Limit.")); return;} // Überprüfen Sie den Erweiterungsstring -Fileext1 = Dateiname1.Substring (Dateiname1.lastIndexof (".") + 1) .tolowerCase (); // Refactor Der Upload -Dateiname SimpleDateFormat df1 = new SimpleDateFormat ("yyyyymmdhmms"); New Random (). NextInt (1000) + "." + fileexte1; byte [] buffer = new Byte [1024]; // Dateiausgabe Stream FileOutputStream fos = new FileOutputStream (SavePath + newFileName1); String url = savePhode + newFileName1; out.println (URL); // Aktuelle Dateieingabe stream in Memory InputStream in = new Dateistream in = new Dateistream in = new Dateistream in = new Dateistream in = new FileStream (NEWE Dateistream) (Datei, {Int NUME); while ((num = in.read (puffer))> 0) {fos.write (puffer, 0, num); }} catch (Ausnahme e) {e.printstacktrace (System.err);} endlich {in.close (); fos.close ();}%> <%! private String getError (String -Nachricht) {jsonObject obj = new JsonObject (); Obj.put ("Fehler", 1); obj.put ("meldung", meldung); return obj.tojonstring ();}%> ( 4) Das JAR -Paket zum Hochladen von Bildern nach Senditor ist wie folgt
A.Commons-fileUpload-1.2.1.Jar
B.Commons-i-1.4.jar
C.Json_Simple-1.1.Jar
Hier wird kein JS -Code über den Kindeditor verwendet. Weitere Informationen finden Sie unter: Kinditor implementiert eine automatische Image -Upload -Funktion.
(5) Die DIV zum Hochladen von Bildern durch den Senditor lautet wie folgt
<div id = "div2"> <ul> <li id = "wy"> <img style = "Höhe: 100%; Breite: 100%; Position: Absolut; Top: 0px;" src = "<%= request.getContextPath ()%>/shequ/bilder/index.png;" > </li> </ul> </div>
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.