Comment implémenter le téléchargement asynchrone d'images dans Java WebApp, comprenez d'abord les problèmes suivants:
1. Téléchargez l'image;
2. Aperçu du téléchargement d'images;
3. Téléchargez l'image et modifiez l'adresse et ajoutez-la à la base de données de manière asynchrone;
Contenu principal <br /> Cet exemple utilise principalement le code frontal HTML pur et JavaScript comme outils pour interroger les exemples de code de démos qui implémentent le téléchargement d'images:
(1) Cliquez sur le code Div pour télécharger l'image:
<div id = "div1"> <input type = "file" id = "choisir" accepter = "image / *" multiple> <a id = "upload"> Télécharger l'image </a> <a onClick = "selectphoto ();"> Sélectionner dans la galerie </a> <a id = "back"> annuler </a> </ div>
(2) Code JavaScript
<script type = "text / javascript"> // Obtenez l'élément de formulaire d'entrée de l'image téléchargée var fileChooser = document.getElementById ("Choisissez"); // Créer un canevas pour compresser l'image var canvas = document.CreateElement ("canvas"); // Obtenez l'attribut visuel de canvas var ctx = canvas.getContext ('2d'); // Tile Canvas var tcanvas = document.CreateElement ("Canvas"); var tctx = tcanvas.getContext ("2d"); // Taille de canevas var maxsize = 100 * 1024; // Téléchargez l'événement de clic de l'image $ ("# upload"). Sur ("cliquez", fonction () {filechooser.click ();}) .on ("touchstart", function () {// ajouter l'attribut d'élément $ (this) .addclass ("touch");}) .on ("touchend", function () {// supprimer l'attribut élément $ (this). }); // élément modifie filechooser.onchange = function () {// Si la sélection est vide, renvoyez l'opération if (! This.files.length) return; // Créez le tableau d'images téléchargées var fichiers = array.prototype.slice.call (this.files); // Lorsque le nombre est supérieur à 1 image, fonctionnement inversé, défini ici selon les exigences; Le côté PC peut télécharger plusieurs images à la fois et en sélectionner un du côté mobile, et une seule page peut être prévisualisée. Puisqu'il s'agit d'un terminal mobile, ce jugement est rendu. if (files.length> 1) {alert ("seule 1 image peut être téléchargée à la fois"); retour; } // Transférer le tableau de fichiers des photos téléchargées, vous pouvez simplement le prendre sans traverser. Files.ForEach (Fonction (fichier, i) {// Juge Format de l'image if (! /// (?: jpeg | png | gif) /i.test (file.type)) return; var Reader = new fileReader (); var li = document.createelement ("li"); // obtenir la taille de l'image Var size / 1024> 1024? (~ ~ (10 * fichier. 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; }// After L'image est chargée, compressez-la et téléchargez-la si (img.....calsine }); }; // Ce qui suit est lié à la compression d'image; // Utilisez Canvas pour compresser (img) {var initSize = img.src.length; var width = img.width; var height = img.height; // Si l'image est supérieure à quatre mégapixels, calculez le rapport de compression et appuyez sur le rapport taille à moins de 4 millions de VAR; if ((ratio = largeur * hauteur / 4000000)> 1) {ratio = math.sqrt (ratio); Largeur / = rapport; hauteur / = rapport; } else {ratio = 1; } canvas.width = width; canvas.height = hauteur; // diffuser l'arrière-plan ctx.fillStyle = "#fff"; ctx.fillrect (0, 0, canvas.width, canvas.height); // Si le pixel d'image est supérieur à 1 million, utilisez des carreaux pour dessiner le nombre de var; if ((count = largeur * hauteur / 1000000)> 1) {count = ~~ (math.sqrt (count) + 1); // Calculez le nombre de tuiles à diviser en // calculer la largeur et la hauteur de chaque tuiles var nw = ~~ (largeur / comptage); var nh = ~~ (hauteur / nombre); tcanvas.width = nw; tcanvas.height = nh; pour (var i = 0; i <count; i ++) {pour (var j = 0; j <count; j ++) {tctx.DrawImage (iMg, i * nw *, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh); ctx.DrawImage (tcanvas, i * nw, j * nh, nw, nh); }}} else {ctx.drawImage (img, 0, 0, largeur, hauteur); } // Effectuer une compression minimale var ndata = canvas.todataurl ('image / jpeg', 0,1); console.log ('avant la compression:' + initSize); console.log ('après compression:' + ndata.length); Console.log ('Rate de compression:' + ~~ (100 * (iniTSize - ndata.length) / iniTSize) + "%"); tcanvas.width = tcanvas.height = canvas.width = canvas.height = 0; retour ndata; } // Téléchargez l'image, convertissez l'image Base64 en un objet binaire, le remplissez en formdata pour télécharger la fonction upload (Basest, type, $ li) {var text = window.atob (Baserstr.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 ([tampon], type); var xhr = new xmlHttpRequest (); var formData = getFormData (); formData.append ('upload', blob); // Demande asynchrone pour télécharger des images du plugin KindEditor JSP Page xhr.open ('Post', '<% = request.getContextPath ()%> / kindEditor / jsp / upload_json.jsp'); xhr.OnreadyStateChange = function () {if (xhr.readystate == 4 && xhr.status == 200) {// Renvoie l'adresse d'image du côté serveur var face_img = xhr.ResponseSext; var id = $ ("# arid"). text (); // Ajouter de manière asynchrone Image $ .ajax ({type: "Post", // demande de manière asynchrone la classe d'action de Struts pour insérer l'adresse d'image dans l'URL de la base de données: "add_article_faceurl.action", dataType: "json", data: "FACEURL =" + face_img + "& id =" + id, async: true, success: funder: fonction) {/ id = "+ id, async: true, success: funder: function (msg) {/ id =" + id, async: trul L'image dans la base de données et la stocker dans la page Hidden Area $ ("# arid"). Texte (msg);}, erreur: fonction (a) {}}); }}; // Simulated upload Progress Affichage // Données envoyant des progrès, le premier 50% affiche la progression xhr.upload.addeventListener ('Progress', fonction (e) {if (Loop) return; prime = ~~ (100 * E.Loaded / e.total) / 2; $ li.Find (". Progress Span"). CSSS ('largeth', prime + "%"); MockProgress ();}}, false); // Recherchez 50% de la fonction de progression de simulation d'utilisation des données mockprogress () {if (Loop) return; Loop = setInterval (function () {cement ++; $ li.find (". Progress Span"). CSS ('width', prime + "%"); if (pect == 99) {ClearInterval (Loop);}}, 100); } xhr.send (formdata); } / ** * Obtenez l'écriture de compatibilité des objets BLOB * @param buffer * @param format * @returns {*} * / fonction getBlob (tampon, format) {try {return new Blob (buffer, {type: format}); } catch (e) {var bb = new (window.blobBuilder || window.webkitBlobBuilder || window.msblobBuilder); Buffer.ForEach (fonction (buf) {bb.append (buf);}); return bb.getblob (format); }} / ** * Get FormData * / fonction getformData () {var isneedshim = ~ navigator.useragent.indexof ('Android') && ~ navigator.vendor.indexof ('google') &&! ~ Navigator.Userager.indexof ('Chrome') &&&! Navigator.UserAgent.match (/ Applewebkit // (/ d +) /). Pop () <= 534; Retour IsNeedShim? new formDatashim (): new formData (); } / ** * FormData Patch, Patch Android Machines qui ne prennent pas en charge FormData Téléchargez BLOBS * @Constructor * / Function FormDatashim () {Console.Warn ('Utilisation de FormData Shim'); var o = this, parties = [], limite = array (21) .join ('-') + (+ new Date () * (1e16 * math.random ())). toString (36), oldisend = xmlhttprequest.prototype.send; this.append = function (nom, valeur, nom de fichier) {part.push ('-' + limite + '/ r / ncontent-disposition: form-data; name = "' + name + '"'); if (valeur instanceof blob) {part.push ('; filename = "' + (filename || 'blob') + '" / r / ncontent-type:' + value.type + '/ r / n / r / n'); Parts.push (valeur); } else {part.push ('/ r / n / r / n' + valeur); } part.push ('/ r / n'); }; // remplacer xhr send () xmlhttprequest.prototype.send = function (val) {var fr, data, oxhr = this; if (val === o) {// ajoute les pièces de chaîne de limite finale.push ('-' + limite + '- / r / n'); // Créer les données blob = getBlob (parties); // Configurez et lisez le blob dans un tableau à envoyer FR = nouveau FileReader (); Fr.Onload = function () {oldSend.Call (oxhr, fr.result); }; fr.onerror = fonction (err) {throw err; }; Fr.ReadasArrayBuffer (données); // Définit le type de contenu en multiparté et Boudary this.setRequestHeader ('Content-Type', 'multipart / form-data; boundary =' + limite); Xmlhttprequest.prototype.Send = olfend; } else {oldSend.Call (this, val); }}; } </ script>(3) Le code lié à la page JSP de téléchargement du plug-in KindEditor.
<% @ page Language = "Java" contentType = "Text / Html; charSet = UTF-8" Pageencoding = "UTF-8"%> <% @ Page Import = "Java.util. %> <% @ page import = "org.apache.commons.fileupload.disk. *"%> <% @ page import = "org.apache.commons.fileupload.servlet. *"%> <% @ page import = "org.apache.strutts2.dispatcher.multipart.multipartreestwrapper"%> <% @ page @ page @ page Import = "org.json.simple. *"%> <% / ** * KINDEDITH JSP * * Ce programme JSP est un programme de démonstration, et il est recommandé de ne pas l'utiliser directement dans des projets réels. * Si vous êtes sûr d'utiliser ce programme directement, veuillez confirmer attentivement les paramètres de sécurité pertinents avant de l'utiliser. * * /// File Save Directory Path String string SavePath = pageContex "D: / www / qslnadp / adp / webroot / kindoditor / jointd /"; // file enregistre urlString SaveUrl = request.getContextPath () + "/ jointd /"; "GIF, jpg, jpeg, png, bmp, blob"); extmap.put ("flash", "swf, flv"); extmap.put ("media", "swf, flv, mp3, wav, wma, wmv, mid, avi, mpg, asf, rm, rmvb"); extmap.put ("file", "Doc, docx, xls, xlsx, ppt, htm, html, txt, zip, rar, gz, bz2"); // taille maximale de fichier maxsize = 1000000; réponse.setContentType ("text / html; charset = utf-8"); if (! ServletFileupload.ismultipartContent (demande); out.println (getError ("Veuillez sélectionner le fichier.")); return;} // vérifier le fichier du répertoire uploaddir = nouveau fichier (SavePath); if (! uploaddir.isdirectory ()) {out.println (getError ("uploaddir.canwrite ())); return;} // vérifier les autorisations d'écriture du répertoire if (! uploaddir.canwrite ()) {out.println (getError (" uploaddir.No write permissions ")); request.getParameter ("dir"); return;} // Créer un dossier SavePath + = dirname + "/"; SaveUrl + = dirname + "/"; fichier SaveDirFile = new File (SavePath); if (! SavedirFile.exists ()) {SaveDirFile.mkDirs ();} SimpledateFormat sdf = new SimpledateFormat ("Yyyymmdd"); String ymd = sdf.format (new Date ()); SavePath + = ymd + "/";; File (sauvepath); if (! Dirfile.exists ()) {dirfile.mkdirs ();} // struts2 request wrapper filter multipartReSetWrapper wrapper = (multipartTReSetWrapper); wrapper.getFiles ("upload") [0]; // vérifier la taille du fichier if (file.length ()> maxsize) {out.println (getError ("La taille du fichier de téléchargement dépasse la limite.")); return;} // Vérifiez la chaîne d'extension fileext1 = filename1.substring (filename1.lastIndexof (".") + 1) .tolowerCase (); // Refactor le nom de fichier de télécharge "_" + new Random (). NextInt (1000) + "." + fileExt1; byte [] buffer = new Byte [1024]; // Get File Sortie Stream FileOutputStream fos = new FileOutputStream (SavePath + NewFileName1); String URL = SavePath + NewFilename1; Out.println (URL); // Get Current File Stream dans la mémoire InputStream in = new FileInputStream (file); Try {int num = 0; while ((num = in.read (tampon))> 0) {fos.write (tampon, 0, num); }} catch (exception e) {e.printStackTrace (System.err);} enfin {in.close (); fos.close ();}%> <%! String privé getError (message de chaîne) {jsonObject obj = new JSONObject (); obj.put ("erreur", 1); obj.put ("message", message); retour obj.tojSontring ();}%> ( 4) Le package JAR pour télécharger des photos par KindEditor est le suivant
A.Commons-fileupload-1.2.1.jar
B.Commons-io-1.4.jar
C.json_simple-1.1.jar
Il n'y a pas de code JS sur KindEditor utilisé ici. Pour plus de détails, veuillez vous référer à: Kindor implémente la fonction de téléchargement d'image automatique.
(5) La div pour télécharger des images par KindEditor est la suivante
<div id = "div2"> <ul> <li id = "wy"> <img style = "hauteur: 100%; largeur: 100%; position: absolue; top: 0px;" src = "<% = request.getContextPath ()%> / shequ / images / index.png;" > </li> </ul> </div>
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.