Java WebAppに非同期のアップロードの画像を実装する方法、まず次の問題を理解します。
1。写真をアップロードします。
2。画像アップロードプレビュー。
3.画像をアップロードしてアドレスを変更し、それを非同期にデータベースに追加します。
メインコンテンツ<BR />この例は、主に純粋なHTMLフロントエンドとJavaScriptコードを使用して、画像アップロードを実装するデモのコード例を照会するツールとして使用しています。
（1）DIVコードをクリックして画像をアップロードします。
<div id = "div1"> <入力タイプ= "file" id = "choice" accept = "image/*" bulthing> <a id = "upload"> a onclick = "selectphoto（）;"> select from the Gallery </a> <a id = "back"> cancel </a> </div> </div> </div>
（2）JavaScriptコード
<script type = "text/javascript"> //アップロードされた画像の入力フォーム要素を取得var filechooser = document.getElementById（ "choice"）; //画像を圧縮するためのキャンバスを作成するvar canvas = document.createelement（ "canvas"）; //キャンバスの視覚属性を取得var ctx = canvas.getContext（ '2d'）; //タイルキャンバスvar tcanvas = document.createelement（ "canvas"）; var tctx = tcanvas.getContext（ "2d"）; //キャンバスサイズvar maxsize = 100 * 1024; //イメージクリックイベント$（ "＃upload"）。 }）; //要素はFileChooser.OnChange = function（）{//選択が空の場合は、操作を返します（！this.files.length）return; //アップロードされた画像の配列を作成var files = array.prototype.slice.call（this.files）; //数値が1つの画像を超える場合、逆操作は、要件に従ってここに設定します。 PC側は一度に複数の画像をアップロードし、モバイル側で1つを選択でき、1ページのみをプレビューできます。モバイルターミナルであるため、この判断が行われます。 if（files.length> 1）{alert（ "一度にアップロードできる" 1枚の画像のみをアップロードできます "）;戻る; } //アップロードされた画像のファイル配列を転送すると、移動せずに使用できます。 files.foreach（function（file、i）{// image形式if（！///（？：：：jpeg | png | gif）/i.test（file.type））return; var reader = new fileReader（）; var li = documenteelement（ "li"）; 1024）/10 +「MB」：~~（file.size/1024）+/ image Preview li.innerhtml 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画像はそれをロードしてから、callback（）; }）; }; //以下は画像圧縮に関連しています。 //キャンバスを使用して圧縮（IMG）{var initsize = img.src.length; var width = img.width; var height = img.height; //画像が4メガピクセルより大きい場合は、圧縮比を計算し、サイズを400万枚未満のVAR比に押します。 if（（ratio = width * height / 4000000）> 1）{比= math.sqrt（比率）; width /=比率;高さ /=比率; } else {比率= 1; } canvas.width = width; canvas.height = height; //背景CTX.FILLSTYLE = "#fff"; ctx.fillrect（0、0、canvas.width、canvas.height）; //画像ピクセルが100万を超える場合は、タイルを使用してvarカウントを描画します。 if（（count = width * height / 1000000）> 1）{count = ~~（math.sqrt（count） + 1）; // //各タイルの幅と高さを計算するタイルの数var nw = ~~（width /count）; var nh = ~~（height / count）; 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 *比、j * nh *比、nw *比、nh *比、0、0、nw、nh）; ctx.drawimage（tcanvas、i * nw、j * nh、nw、nh）; }}} else {ctx.drawimage（img、0、0、width、height）; } //最小圧縮var ndata = canvas.todataurl（ 'image/jpeg'、0.1）を実行します。 console.log（ '圧縮前：' + initize）; console.log（ '圧縮後：' + ndata.length）; console.log（ '圧縮率：' + ~~（100 *（initsize -ndata.length） / initize） + "％"）; tcanvas.width = tcanvas.height = canvas.width = canvas.height = 0; ndataを返します。 } //画像をアップロードし、base64画像をバイナリオブジェクトに変換し、formdataに詰めて関数アップロード（basestr、type、$ li）{var text = window.atob（basestr.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（ 'upload'、blob）; // Kindeditorプラグインの画像をアップロードするための非同期リクエストjsp page xhr.open（ 'post'、 '<％= request.getContextPath（） xhr.oneadystatechange = function（）{if（xhr.readystate == 4 && xhr.status == 200）{//サーバー側の画像アドレスを返しますvar face_img = xhr.responsetext; var id = $（ "＃arid"）。text（）; //非同期的に画像$ .ajax（{type： "post"、// StrutsのアクションクラスをデータベースURLに挿入するようにStrutsのアクションクラスを非同期に要求します： "add_article_faceurl.action"、datatype： "json"、data： "faceurl ="+face_img+"データベースに画像を保存して、表示された領域$（ "＃arid"）。 }}; //進行状況をシミュレートしたアップロードディスプレイ//データの送信進行状況、進行状況xhr.upload.addeventlistener（ 'progress'、function（e）{if（loop）return; prime =（100 * e.total）/2; 2; $ li.find（ "。進行状況範囲"）。 mockprogress（）; //データの50％を検索シミュレーションの進行状況機能mockprogress（）{if（loop）return; loop = setInterval（function（）{cement ++; $ li.find（ "。progress span"）。css（ 'width'、prime+"％"）; if（pecent == 99）{clearinterval（loop）;}}、100）; } xhr.send（formdata）; } / ** * blobオブジェクトの互換性の書き込みを取得 * @param buffer * @param format * @returns { *} * / function getBlob（buffer、format）{try {return new blob（buffer、{type：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'）&& 〜vavigator.vendor.indexof（ 'google'）&&！〜！〜navigator.useragent.indexof（ 'Chrome'）&& && && navigator.useragent.match（/applewebkit //（/d+）/）。pop（）<= 534; IsNeedshimを返しますか？ new formdatashim（）：new formdata（）; } / *** formdataパッチ、formdataアップロードblobs* @constructor* / function formdatashim（）{console.warn（ 'formdata shim'）; var o = this、parts = []、boundary = array（21）.join（ ' - '） +（ + new date（） *（1e16 * math.random（）））。 this.append = function（name、value、filename）{parts.push（ ' - ' + boundary + '/r/ncontent-disposition：form-data; name = "' + name + '"'）; if（value instanceof blob）{parts.push（ '; filename = "' +（filename || 'blob'） + '"/r/ncontent-type：' + value.type + '/r/n/r/n'）; parts.push（value）; } else {parts.push（ '/r/n/r/n' + value）; } parts.push（ '/r/n'）; }; // xhr send（）xmlhttprequest.prototype.send = function（val）{var fr、data、oxhr = this; if（val === o）{//最終境界文字列parts.push（ ' - ' + boundary + ' - /r/n'）; // blob data = getBlob（parts）を作成します。 //セットアップしてBLOBを配列に読み取り、FR = new FileReader（）を送信します。 fr.onload = function（）{oldsend.call（oxhr、fr.result）; }; fr.onerror = function（err）{throw err; }; fr.readasarraybuffer（data）; // MultiPartコンテンツタイプとBoudary this.setRequestheader（ 'content-type'、 'multipart/form-data; boundary =' + boundary）を設定します。 xmlhttprequest.prototype.send = oldsend; } else {oldsend.call（this、val）; }}; } </script>（3）Kindeditorプラグインのアップロード画像JSPページ関連コード。
<％@ page Language = "Java" contentType = "text/html; charset = utf-8" pageencoding = "utf-8"％> <％@ページインポート= "java.util。*、java.io。 Import = "org.apache.commons.fileupload。*"％> <％@ page import = "org.apache.commons.fileupload.disk import = "org.apache.struts2.dispatcher.multipart.multipartrequestwrapper"％> <％@ page import = "org.json.simple。 *このプログラムを直接使用する場合は、使用する前に関連するセキュリティ設定を注意深く確認してください。 * * * // "d：/www/qslnadp/adp/webroot/dindeditor/"; // file save directory urlstring saveurl = request.getcontextpath（） + "/adtach/"; //ハッシュマップ<文字列> extmap = extmap = extmap = extmap = extmap = extmap = extmap = extmap = extmap = ext（ "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 "）; //最大ファイルサイズlong maxsize = 1000000; response.setContenttype（" text/html; charset = utf-8 "）; out.println（getError（ "ファイルを選択してください。"））; return;} //ディレクトリファイルuploaddir = new file（savepath）; if（！uploaddir.isdirectory（））{out.println（getError（ "uploaddir.canwrite（））;} //ディレクトリの書き込み許可をチェックするif（！uploaddir.canwite（））{out.println（geterror（geterror（" uploaddir.no write dirname; "）;"）; "） request.getParameter（ "dir"）; if（dirname == null）{dirname = "image";} if（！extmap.containskey（dirname））{out.println（getError（ "dir" directory name is specorect。 "））; return;} //フォルダーを作成しますsavepath + = dirname + "/"; saveurl + = dirname + "/"; file savedirfile = new file（savepath）; if（！savedirfile.exists（））{savedirfile.mkdirs（）;} simpledateformat sdf = new simpledateformat（ "yyyymmdd"）; string ymd = sdf.format（new date（））; save path + = ymd + "/"; saveurrl + = ymd + "/"/"/"/"/"/"/" （！dirfile.exists（））{dirfile.mkdirs（）;} // struts2 request wrapperフィルターMultipartrequestwrapper wrapper =（multipartrequestwrapper）request; //アップロードされたファイル名Filename1 = wrapper.getfileNames（ "0] wrapper.getFiles（ "upload"）[0]; //ファイルサイズを確認するif（file.length（）> maxsize）{out.println（getError（ "ファイルサイズのアップロードが制限を超えます。"））; return;} //拡張文字列をチェックしますfileext1 = filename1.substring（filename1.lastindexof（ "。"） + 1）.tolowercase（）; //アップロードファイル名SimpledateFormat Df1 = new SimpledateFormat（ " "_" + new Random（）。nextint（1000） + "。" + fileext1; byte [] buffer = new byte [1024]; // get file output fileoutputstream fos = new fileoutputstream（save + newFileName1）; string url = savepath + newFileName1; out.println（url）; while（（num = in.read（buffer））> 0）{fos.write（buffer、0、num）; }} catch（Exception e）{e.printstacktrace（system.err）;} fullly {in.close（）; fos.close（）;}％> <％！private string getError（string message）{jsonobject obj = new jsonobject（）; obj.put（ "error"、1）; obj.put（ "message"、message）; obj.tojsonstring（）;}％>を返します（ 4）Kindeditorによる写真をアップロードするためのJARパッケージは次のとおりです
A.commons-fileupload-1.2.1.jar
b.commons-io-1.4.jar
C.JSON_SIMPLE-1.1.JAR
ここで使用されているKindeditorに関するJSコードはありません。詳細については、以下を参照してください。Kinditorは自動画像アップロード機能を実装しています。
（5）Kindeditorによる写真をアップロードするためのdivは次のとおりです
<div id = "div2"> <ul> <li id = "wy"> <img style = "height：100％; width：100％; position：absolute; top：0px;" src = "<％= request.getContextPath（）％>/shequ/images/index.png;" > </li> </ul> </div>
上記はこの記事のすべての内容です。私はそれがすべての人の学習に役立つことを願っています、そして、私は誰もがwulin.comをもっとサポートすることを願っています。