كيفية تنفيذ التحميل غير المتزامن للصور في Java WebApp ، فهم أولاً المشكلات التالية:
1. تحميل الصورة ؛
2. معاينة تحميل الصورة ؛
3. قم بتحميل الصورة وتغيير العنوان وأضفه إلى قاعدة البيانات بشكل غير متزامن ؛
المحتوى الرئيسي <br /> يستخدم هذا المثال بشكل أساسي رمز HTML الواجهة الأمامية ورمز JavaScript كأدوات للاستعلام عن أمثلة الكود للعروض التجريبية التي تنفذ تحميل الصور:
(1) انقر فوق رمز DIV لتحميل الصورة:
<div id = "div1"> <input type = "file" id = "select" قبول = "image/*" multip> <a id = "expload"> قم بتحميل الصورة </a> <a onClick = "selectphoto () ؛
(2) رمز JavaScript
<script type = "text/javaScript"> // احصل على عنصر نموذج الإدخال في الصورة التي تم تحميلها var filechooser = document.getElementById ("اختر") ؛ // إنشاء قماش لضغط صورة var canvas = document.createElement ("canvas") ؛ // احصل على السمة المرئية لـ Canvas var ctx = canvas.getContext ('2d') ؛ // tile canvas var tcanvas = document.createElement ("canvas") ؛ var tctx = tcanvas.getContext ("2d") ؛ // size size var maxSize = 100 * 1024 ؛ // قم بتحميل الصورة انقر فوق حدث $ ("#upload"). on ("Click" ، function () {filechooser.click () ؛}) .on ("touchstart" ، function () {// إضافة سمة العنصر $ (this) .addclass ("touch") ؛}) .on ( }) ؛ // العنصر يغير filechooser.onchange = function () {// إذا كان التحديد فارغًا ، فأرجع العملية إذا (! this.files.length) return ؛ // قم بإنشاء صفيف الصور التي تم تحميلها var files = array.prototype.slice.call (this.files) ؛ // عندما يكون الرقم أكبر من صورة واحدة ، والتشغيل العكسي ، تم تعيينه هنا وفقًا للمتطلبات ؛ يمكن لجانب الكمبيوتر تحميل عدة صور في وقت واحد ، وتحديد واحدة على جانب الهاتف المحمول ، ويمكن معاينة صفحة واحدة فقط. نظرًا لأنها محطة متنقلة ، يتم إصدار هذا الحكم. if (files.length> 1) {Alert ("يمكن تحميل صورة واحدة فقط في وقت واحد") ؛ يعود؛ } // نقل مجموعة الملفات من الصور التي تم تحميلها ، يمكنك فقط أخذها دون عبورها. files.foreach (function (file ، i) {// judge format format if (! /// (؟: jpeg | png | gif) /i 1024)/10 + "MB": ~~ (size/1024) 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 يتم تحميل الصورة ، ثم قم بتحميلها (IMG.COMPLET) }) ؛ } ؛ // فيما يلي مرتبط بضغط الصورة ؛ // استخدم القماش لضغط (img) {var initsize = img.src.length ؛ var width = img.width ؛ var height = img.height ؛ // إذا كانت الصورة أكبر من أربعة ميجابكسل ، فقم بحساب نسبة الضغط واضغط على الحجم إلى أقل من 4 ملايين نسبة VAR ؛ if ((نسبة = العرض * الارتفاع / 4000000)> 1) {ratio = math.sqrt (نسبة) ؛ عرض /= نسبة ؛ الارتفاع /= نسبة ؛ } آخر {ratio = 1 ؛ } canvas.width = العرض ؛ canvas.Height = الارتفاع ؛ // انشر الخلفية ctx.fillstyle = "#fff" ؛ ctx.fillRect (0 ، 0 ، canvas.width ، canvas.height) ؛ // إذا كان بكسل الصورة أكبر من مليون ، فاستخدم البلاط لرسم عدد VAR ؛ if ((count = width * height / 1000000)> 1) {count = ~~ (math.sqrt (count) + 1) ؛ // حساب عدد البلاط المراد تقسيمه إلى // احسب عرض وارتفاع كل بلاطات var nw = ~~ (العرض /العد) ؛ var nh = ~~ (الارتفاع / العد) ؛ tcanvas.width = NW ؛ tcanvas.Height = NH ؛ لـ (var i = 0 ؛ i <count ؛ i ++) {for (var j = 0 ؛ j <count ؛ j ++) {tctx.drawimage (img ، i * nw * ratio ، j * nh * ratio ، nw * ratio ، nh * ratio ، 0 ، 0 ، nw ، nh) ؛ ctx.drawimage (tcanvas ، i * nw ، j * nh ، nw ، nh) ؛ }}} آخر {ctx.drawImage (img ، 0 ، 0 ، العرض ، الارتفاع) ؛ } // أداء الحد الأدنى من الضغط var ndata = canvas.todataurl ('image/jpeg' ، 0.1) ؛ console.log ('قبل الضغط:' + initsize) ؛ console.log ('بعد الضغط:' + ndata.length) ؛ console.log ('معدل الضغط:' + ~~ (100 * (initsize - ndata.length) / initsize) + "٪") ؛ tcanvas.width = tcanvas.height = canvas.width = canvas.height = 0 ؛ إرجاع ndata ؛ }. var buffer = new uint8array (text.length) ؛ var prime = 0 ، loop = null ؛ لـ (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) ؛ // طلب غير متزامن لتحميل الصور من Plugin jsp jsp pagin xhr.open ('post' ، '<٪ = request.getContextPath () ٪>/kindeditor/jsp/upload_json.jsp') ؛ XHR.OnReadyStateChange = function () {if (xhr.readyState == 4 && xhr.status == 200) {// إرجاع عنوان الصورة على جانب الخادم var face_img = xhr.responsetext ؛ var id = $ ("#erid"). text () ؛ // أضف بشكل غير متزامن صورة $ .ajax ({type: "post" ، // اطلب بشكل غير متزامن فئة إجراءات struts لإدراج عنوان الصورة في عنوان URL لقاعدة البيانات: القيمة المتعلقة بالصورة في قاعدة البيانات وتخزينها في الصفحة المخفية $ ("#arid"). النص (msg) ؛ }} ؛ // محاكاة تحميل التقدم عرض // إرسال البيانات ، فإن أول 50 ٪ يعرض التقدم xhr.upload.addeventListener ('Progress' ، function (e) {if (loop) return ؛ prime = ~~ (100 * eCloaded/E.Total)/2 ؛ $ li.find (". mockprogress () ؛ . loop = setInterval (function () {cement ++ ؛ $ li.find (". progress span"). } 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') && ~ navigator.vendor.indexof ('Google') &&! navigator.useragent.match (/AppleWebkit // (/d+)/). pop () <= 534 ؛ إرجاع isneedshim؟ FormDatashim () جديد: FormData () جديد ؛ } / *** FormData تصحيح ، تصحيحات Android التي لا تدعم FormData تحميل blobs* constructor* / forms 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 exateof blob) {parts.push ('؛ filename = "' + (filename || 'Blob') + '"/r/ncontent-type:' + value.type + '/r/n/n') ؛ parts.push (القيمة) ؛ } آخر {parts.push ('/r/n/r/n' + value) ؛ } parts.push ('/r/n') ؛ } ؛ . if (val === o) {// إلحاق أجزاء سلسلة الحدود النهائية. // إنشاء بيانات blob = getBlob (أجزاء) ؛ // قم بإعداد وقراءة blob في صفيف ليتم إرساله fr = new fileReader () ؛ الاب. } ؛ الاب. } ؛ Fr.ReadasarRayBuffer (Data) ؛ // قم بتعيين نوع المحتوى متعدد المحتوى و boudary this.setRequestHeader ('نوع المحتوى' ، 'multipart/form-data ؛ boundary =' + الحدود) ؛ xmlHttpRequest.prototype.send = oldsend ؛ } آخر {oldsend.call (هذا ، val) ؛ }} ؛ } </script>(3) رمز صفحة تحميل صورة JSP من المكون الإضافي.
<٪@ page language = "java" contentType = "text/html ؛ charset = utf-8" pageencoding = "utf-8" ٪> <٪@ page import = "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. * إذا كنت متأكدًا من استخدام هذا البرنامج مباشرة ، فيرجى تأكيد إعدادات الأمان ذات الصلة قبل استخدامه. * * * /// file save save path path string savepath = pagecontext.getServletContext (). "d:/www/qslnadp/adp/webroot/kindeditor/expern/" ؛ "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") ؛ "DOC ، DOCX ، XLS ، XLSX ، PPT ، HTM ، HTML ، TXT ، ZIP ، RAR ، GZ ، BZ2") ؛ // الحد الأقصى لحجم الملف الطويل maxSize = 1000000 ؛ response.setContentType ("text/html ؛ charset = utf-8") ؛ Out.println (geterror ("الرجاء تحديد ملف.")) ؛ return ؛} // تحقق من ملف الدليل UploadDir = ملف جديد (SavePath) ؛ if (! eploaddir.isdirectory ()) {out.println (geterror ("uploaddir.canwrite ())) ؛ return ؛} // تحقق من أذونات الدليل إذا (! eploaddir.canwrite ()) {out.println (geterror (getRorror ( request.getParameter ("dir") ؛ return ؛} // إنشاء مجلد SavePath + = DirName + "/" ؛ Saveurl + = DirName + "/" ؛ ملف SaveDirfile = جديد (SavePath) ؛ if (! saveDirfile.exists ()) {saveirfile.mkdirs () ؛} simpledateformat sdf = new SimplEdateFormat ("yyyymmdd") ؛ String ymd = sdf.format (date ()) ؛ SavePath + = ymd + "/" (! dirfile.exists ()) {dirfile.mkdirs () ؛} // struts2 مرشح التفاف multiredartrequestwrapper wrapper = (multipartrequestWrapper) طلب ؛ wrapper.getFiles ("expload") [0] ؛ // تحقق من حجم الملف if (file.length ()> maxSize) {out.println (geterror ("حجم الملف يتجاوز الحد الأقصى.")) ؛ return ؛} // تحقق من سلسلة التمديد filext1 = filename1.SubString (filename1.lastIndexof (".". ". Random (). NextInt (1000) + "." + filext1 ؛ byte [] buffer = new byte [1024] ؛ // الحصول على ملف Filetpure FileOutputStream fos = جديد fileOutputStream (SavePath + NewFilename1) ؛ url url = savepath + newFilename1 ؛ out.println (url) ؛ // الحصول على تدفق إدخال الملف الحالي في الذاكرة في = fileInputStream (filedutered) ؛ try. بينما ((num = in.read (buffer))> 0) {fos.write (buffer ، 0 ، num) ؛ }} catch (استثناء e) {E.PrintStackTrace (system.err) ؛} أخيرًا {in.close () ؛ fos.close () ؛} ٪> <٪! سلسلة خاصة geterror (رسالة سلسلة) {jsonobject obj = new JsonObject () ؛ obj.put ("خطأ" ، 1) ؛ obj.put ("رسالة" ، رسالة) ؛ إرجاع obj.tojsonstring () ؛} ٪> ( 4) حزمة الجرة لتحميل الصور بواسطة KindeDitor هي كما يلي
A.Commons-Filepload-1.2.1.Jar
B.Commons-IO-1.4.Jar
C.JSON_SIMPLE-1.1.JAR
لا يوجد رمز JS حول KindeDitor المستخدم هنا. للحصول على التفاصيل ، يرجى الرجوع إلى: KindiTor يقوم بتنفيذ وظيفة تحميل الصورة التلقائي.
(5) Div لتحميل الصور بواسطة KindeDitor على النحو التالي
<div id = "div2"> <ul> <li id = "wy"> <img style = "الارتفاع: 100 ٪ ؛ العرض: 100 ٪ ؛ الموضع: المطلق ؛ الأعلى: 0px ؛" src = "<٪ = request.getContextPath () ٪>/shequ/images/index.png ؛" > </li> </ul> </viv>
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.