วิธีใช้การอัปโหลดภาพแบบอะซิงโครนัสใน Java Webapp ก่อนอื่นให้เข้าใจปัญหาต่อไปนี้:
1. อัปโหลดรูปภาพ
2. ภาพตัวอย่างอัปโหลดภาพ;
3. อัปโหลดรูปภาพและเปลี่ยนที่อยู่และเพิ่มลงในฐานข้อมูลแบบอะซิงโครนัส
เนื้อหาหลัก <br /> ตัวอย่างนี้ส่วนใหญ่ใช้รหัส Front-end และ JavaScript บริสุทธิ์เป็นเครื่องมือในการค้นหาตัวอย่างโค้ดของการสาธิตที่ใช้การอัปโหลดรูปภาพ:
(1) คลิกที่รหัส DIV เพื่ออัปโหลดภาพ:
<div id = "div1"> <input type = "file" id = "เลือก" accept = "image/*" multiple> <a id = "upload"> อัปโหลดรูปภาพ </a> <a onclick = "selectphoto ();"> เลือกจากแกลเลอรี่ </a>
(2) รหัส JavaScript
<script type = "text/javascript"> // รับองค์ประกอบแบบฟอร์มอินพุตของภาพที่อัปโหลด var filechooser = document.getElementById ("เลือก"); // สร้างผืนผ้าใบสำหรับการบีบอัดภาพ var canvas = document.createElement ("Canvas"); // รับแอตทริบิวต์ภาพของ Canvas var ctx = canvas.getContext ('2d'); // กระเบื้อง Canvas var tcanvas = document.createElement ("Canvas"); var tctx = tcanvas.getContext ("2d"); // canvas ขนาด var maxsize = 100 * 1024; // อัปโหลดภาพคลิกเหตุการณ์ $ ("#upload") บน ("คลิก", function () {filechooser.click ();}) .on ("touchstart", ฟังก์ชั่น () {// เพิ่มแอตทริบิวต์องค์ประกอบ $ (this) .addclass ("touch");}) - // การเปลี่ยนแปลงองค์ประกอบการเปลี่ยนแปลง fileChooser.onchange = function () {// หากการเลือกว่างเปล่าให้ส่งคืนการดำเนินการถ้า (! this.files.length) คืน; // สร้างอาร์เรย์ของรูปภาพที่อัปโหลด var files = array.prototype.slice.call (this.files); // เมื่อตัวเลขมากกว่า 1 ภาพการดำเนินการย้อนกลับตั้งไว้ที่นี่ตามข้อกำหนด ด้านพีซีสามารถอัปโหลดรูปภาพได้หลายภาพในแต่ละครั้งและเลือกภาพบนมือถือและสามารถดูตัวอย่างได้เพียงหน้าเดียว เนื่องจากเป็นเทอร์มินัลมือถือการตัดสินนี้จึงเกิดขึ้น if (files.length> 1) {Alert ("สามารถอัปโหลดรูปภาพได้เพียง 1 ภาพในแต่ละครั้ง"); กลับ; } // โอนอาร์เรย์ไฟล์ของรูปภาพที่อัปโหลดคุณสามารถนำไปใช้โดยไม่ต้องข้าม files.foreach (ฟังก์ชั่น (ไฟล์, i) {// ตัดสินรูปแบบภาพถ้า (! /// (?: jpeg | png | gif) /i.test (file.type)) return; var reader = new filereader (); var li = document.createElement ("li"); 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; }// หลังจากที่มีการโหลดภาพแล้วอัปโหลดถ้า (img.complete) {callback (); - - // ต่อไปนี้เกี่ยวข้องกับการบีบอัดภาพ; // ใช้ผ้าใบเพื่อบีบอัด (img) {var initsize = img.src.length; var width = img.width; ความสูง var = img.height; // หากภาพมีขนาดใหญ่กว่าสี่ล้านพิกเซลให้คำนวณอัตราส่วนการบีบอัดและกดขนาดให้น้อยกว่า 4 ล้าน VAR if ((อัตราส่วน = ความกว้าง * ความสูง / 4000000)> 1) {อัตราส่วน = math.sqrt (อัตราส่วน); ความกว้าง /= อัตราส่วน; ความสูง /= อัตราส่วน; } else {อัตราส่วน = 1; } canvas.width = ความกว้าง; Canvas.height = ความสูง; // กระจายพื้นหลัง ctx.fillstyle = "#fff"; ctx.fillrect (0, 0, canvas.width, canvas.height); // หากพิกเซลของภาพมีขนาดใหญ่กว่า 1 ล้านให้ใช้กระเบื้องเพื่อวาดจำนวน var; if ((count = width * ความสูง / 1000000)> 1) {count = ~~ (math.sqrt (count) + 1); // คำนวณจำนวนกระเบื้องที่จะแบ่งออกเป็น // คำนวณความกว้างและความสูงของแต่ละกระเบื้องแต่ละ var nw = ~~ (ความกว้าง /นับ); var nh = ~~ (ความสูง / นับ); tcanvas.width = nw; tcanvas.height = nh; สำหรับ (var i = 0; i <count; i ++) {สำหรับ (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, ความกว้าง, ความสูง); } // ดำเนินการบีบอัดขั้นต่ำ 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; } // อัปโหลดรูปภาพแปลงภาพ Base64 เป็นวัตถุไบนารีให้ใส่ลงใน formData เพื่ออัปโหลดฟังก์ชั่น (basest, พิมพ์, $ li) {var text = window.atob (basestr.split (",") [1]); var buffer = ใหม่ uint8array (text.length); var prime = 0, loop = null; สำหรับ (var i = 0; i <text.length; i ++) {buffer [i] = text.charcodeat (i); } var blob = getBlob ([บัฟเฟอร์], ประเภท); var xhr = ใหม่ xmlhttprequest (); var formData = getFormData (); formdata.append ('อัปโหลด', blob); // คำขอแบบอะซิงโครนัสสำหรับการอัปโหลดรูปภาพของปลั๊กอิน Kinditor JSP หน้า xhr.open ('โพสต์', '<%= request.getContextPath ()%>/kindeditor/jsp/upload_json.jsp'); xhr.onreadyStateChange = function () {ถ้า (xhr.readystate == 4 && xhr.status == 200) {// ส่งคืนที่อยู่ภาพบนเซิร์ฟเวอร์ด้าน var face_img = xhr.responsetext; var id = $ ("#arid"). text (); // asynchronously เพิ่มภาพ $ .ajax ({type: "post", // asynchronously ร้องขอคลาสแอ็คชั่น struts 'เพื่อแทรกที่อยู่ภาพลงใน URL ฐานข้อมูล: "add_article_faceurl.action", ข้อมูล: "Json", data: "faceurl ="+face_img+ เกี่ยวข้องกับภาพในฐานข้อมูลและจัดเก็บไว้ในพื้นที่ที่ซ่อนอยู่ $ ("#arid") ข้อความ (msg);}, ข้อผิดพลาด: ฟังก์ชั่น (a) {}}); - // การจำลองการอัปโหลดความคืบหน้าการแสดงผล // การส่งข้อมูลความคืบหน้า 50% แรกแสดงความคืบหน้า xhr.upload.addeventListener ('ความคืบหน้า', ฟังก์ชั่น (e) {ถ้า (ลูป) กลับ; prime = ~~ (100 * e.loaded/e.total)/2; MockProgress ();}}, เท็จ); // ค้นหา 50% ของข้อมูลการใช้ฟังก์ชั่นการจำลองความคืบหน้า MockProgress () {ถ้า (ลูป) ส่งคืน; loop = setInterval (function () {cement ++; $ li.find (". progress span"). css ('width', prime+"%"); ถ้า (pecent == 99) {clearinterval (loop);}}, 100); } xhr.send (formdata); } / ** * รับการเขียนความเข้ากันได้ของวัตถุ blob * @param buffer * @param format * @returns { *} * / ฟังก์ชั่น getBlob (บัฟเฟอร์, รูปแบบ) {ลอง {ส่งคืน blob ใหม่ (บัฟเฟอร์, {ประเภท: รูปแบบ}); } catch (e) {var bb = new (window.blobbuilder || window.webkitblobbuilder || window.msblobbuilder); buffer.foreach (ฟังก์ชั่น (buf) {bb.append (buf);}); ส่งคืน bb.getblob (รูปแบบ); }} / ** * รับ formData * / function getFormData () {var isneedshim = ~ navigator.useragent.indexof ('Android') && ~ navigator.vendor.indexof ('google') &&! navigator.useragent.match (/applewebkit // (/d+)/). pop () <= 534; return isneedshim? New FormDatashim (): New FormData (); } / *** patch formdata, patch Android Machines ที่ไม่รองรับ formdata upload blobs* @constructor* / function formDatashim () {console.warn ('ใช้ formData shim'); var o = this, parts = [], boundary = array (21) .join ('-') + ( + วันที่ใหม่ () * (1e16 * math.random ()). toString (36), oldSend = xmlhttprequest.prototype.send; this.append = function (ชื่อ, ค่า, ชื่อไฟล์) {parts.push ('-' + ขอบเขต + '/r/ncontent-disposition: form-data; name = " + name +'" '); if (ค่าอินสแตนซ์ของ blob) {parts.push ('; filename = "' + (filename || 'blob') + '"/r/ncontent-type:' + value.type + '/r/n/r/n'); Parts.push (ค่า); } else {parts.push ('/r/n/r/n' + ค่า); } parts.push ('/r/n'); - // แทนที่ XHR SEND () XMLHTTTPREQUEST.PROTOTYPE.SEND = FUNCTION (VAL) {var fr, ข้อมูล, oxhr = this; if (val === o) {// ผนวกพาร์ติคชั่นขอบเขตสุดท้าย parts.push ('-' + boundary + '-/r/n'); // สร้าง blob data = getBlob (ส่วน); // ตั้งค่าและอ่านหยดลงในอาร์เรย์ที่จะส่ง fr = filereader ใหม่ (); fr.onload = function () {oldsend.call (oxhr, fr.result); - fr.onerror = function (err) {โยน err; - fr.readasarraybuffer (ข้อมูล); // ตั้งค่าประเภทเนื้อหาหลายส่วนและ boudary this.setRequestheader ('เนื้อหาประเภท', 'multipart/form-data; boundary =' + ขอบเขต); XMLHTTPREQUEST.PROTOTYPE.SEND = OLDSEND; } else {oldsend.call (นี่, val); - } </script>(3) รหัสที่เกี่ยวข้องกับการอัปโหลดหน้า JSP รหัสของปลั๊กอิน Kindeditor
<%@ page language = "java" contentType = "ข้อความ/html; charset = utf-8" pageencoding = "utf-8"%> <%@ page import = "java.util.*, java.io.*"%> %> <%@ page import = "org.apache.commons.fileupload.disk.*"%> <%@ page import = "org.apache.commons.fileupload.servlet.*"%> <%@ page import = นำเข้า = "org.json.simple. *" %> < %/** * Kindeditor JSP * * โปรแกรม JSP นี้เป็นโปรแกรมสาธิตและขอแนะนำไม่ให้ใช้โดยตรงในโครงการจริง * หากคุณแน่ใจว่าจะใช้โปรแกรมนี้โดยตรงโปรดยืนยันการตั้งค่าความปลอดภัยที่เกี่ยวข้องอย่างระมัดระวังก่อนใช้งาน * * /// ไฟล์บันทึกพา ธ ไดเรกทอรี SAVEPATH = PAGECONTEXT.getServletContext (). getRealPath ("/") + "แนบ/"; // string savepath = "http:///192.168.1.226:8080//qslnbase//uploadfile "d:/www/qslnadp/adp/webroot/kindeditor/attained/" // ไฟล์บันทึกไดเรกทอรี urlstring saveurl = request.getContextPath () + "/แนบ/"; "gif, jpg, jpeg, png, bmp, blob"); extmap.put ("flash", "swf, flv"); extmap.put ("สื่อ", "swf, flv, mp3, waV, wma, wmv, mid, avi, mpg, asf, rm, rmv"); "doc, docx, xls, xlsx, ppt, htm, html, txt, zip, rar, gz, bz2"); // ขนาดไฟล์สูงสุดยาว maxsize = 1000000; response.setContentType ("ข้อความ/html; charset = utf-8"); out.println (getERROR ("โปรดเลือกไฟล์")); return;} // ตรวจสอบไฟล์ไดเรกทอรี uploaddir = ไฟล์ใหม่ (บันทึก); if (! uploaddir.isdirectory ()) {out.println (geterror ("uploaddir.canwrite ())); return;} // ตรวจสอบไดเรกทอรีการเขียนสิทธิ์เขียนถ้า (! uploaddir.canwrite ()) {out.println request.getParameter ("dir"); ถ้า (dirname == null) {dirname = "image";} if (! extmap.containskey (dirname)) {out.println return;} // สร้างโฟลเดอร์ savepath + = dirname + "/"; saveurl + = dirname + "/"; ไฟล์ savedirfile = ไฟล์ใหม่ (บันทึก); if (! savedirfile.exists ()) {savedirfile.mkdirs ();} simpledateFormat sdf = ใหม่ simpledateFormat ("yyyymmdd"); string ymd = sdf.format (new date (); savepath + = ymd + "/"/"; (! dirfile.exists ()) {dirfile.mkdirs ();} // struts2 wrapper wrapper filter wrapper multipartrequestWrapper wrapper = (MultipartRequestWrapper) คำขอ; // รับไฟล์สตริงไฟล์ที่อัปโหลด wrapper.getFiles ("อัปโหลด") [0]; // ตรวจสอบขนาดไฟล์ถ้า (file.length ()> maxsize) {out.println (geterror ("ขนาดไฟล์อัปโหลดเกินขีด จำกัด ")); return;} // ตรวจสอบสตริงส่วนขยาย fileext1 = filename1.substring (filename1.lastindexof (".") + 1) .toLowerCase (); // refactor ชื่อไฟล์อัปโหลด simpledateFormat df1 = new SimpleDateFormat "_" + ใหม่สุ่ม (). NextInt (1,000) + ".". " + fileext1; byte [] buffer = byte ใหม่ [1024]; // รับไฟล์ส่งออกไฟล์ fileOutputStream fos = ใหม่ fileOutputStream (บันทึก + newFilename1); string url = savepath + newfilename1; out.println (url); ในขณะที่ ((num = in.read (บัฟเฟอร์))> 0) {fos.write (บัฟเฟอร์, 0, num); }} catch (exception e) {e.printstacktrace (system.err);} ในที่สุด {in.close (); fos.close ();}%> <%! สตริงส่วนตัว geterror (ข้อความสตริง) {jsonObject obj = new JsonObject (); obj.put ("ข้อผิดพลาด", 1); obj.put ("ข้อความ", ข้อความ); ส่งคืน obj.tojsonstring ();}%> ( 4) แพ็คเกจ Jar สำหรับการอัปโหลดรูปภาพโดย Kindeditor มีดังนี้
a.commons-fileupload -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%; ตำแหน่ง: Absolute; top: 0px;" src = "<%= request.getContextPath ()%>/shequ/images/index.png;" > </li></ul> </div>
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น