รู้เบื้องต้นเกี่ยวกับเว็บอัปโหลด
WebPloader เป็นส่วนประกอบการอัปโหลดไฟล์ที่ทันสมัยอย่างง่าย ๆ ส่วนใหญ่ HTML5 และเสริมโดย Flash ที่พัฒนาโดยทีม Baidu Webfe (FEX) ในเบราว์เซอร์ที่ทันสมัยเราสามารถให้ข้อดีของ HTML5 ได้อย่างเต็มที่ในขณะที่ไม่ได้ละทิ้งเบราว์เซอร์ IE หลักและใช้งาน Flash Runtime ดั้งเดิมต่อไปและเข้ากันได้กับ IE6+, iOS 6+, Android 4+ เวลาทำงานสองชุดวิธีการโทรเดียวกันสามารถเลือกได้โดยผู้ใช้ตามความประสงค์ การใช้การกระจายตัวของไฟล์ขนาดใหญ่การอัปโหลดพร้อมกันช่วยปรับปรุงประสิทธิภาพของการอัปโหลดไฟล์อย่างมาก
ที่นี่เราใช้ตัวอย่างจากเว็บไซต์อย่างเป็นทางการเพื่ออัปโหลดอวตารส่วนตัวของเรา
การมุ่งเน้นของเราคือวิธีการอัปโหลดไฟล์โดยใช้ webPloader ในโครงการ Spring Boot ดังนั้นเราจึงสามารถใช้ฟังก์ชั่นง่ายๆสำหรับการอ้างอิงโดยตรงเท่านั้น
นี่คือตัวอย่างที่ดาวน์โหลดจากเว็บไซต์อย่างเป็นทางการ: ฟังก์ชั่นอัปโหลดรูปภาพด้วยการปลูกพืช
เราใช้ตัวอย่างในการอัพโหลดอวาตาร์ใหม่ในโครงการ
เอฟเฟกต์มีลักษณะเช่นนี้:
ก่อนอื่นมาปรับปรุงรหัสตัวอย่าง webploader ของเราใหม่
ต่อไปนี้เป็นรหัสบางส่วนในโครงการของฉัน:
(ฟังก์ชั่น (โรงงาน) {if (! window.jQuery) {แจ้งเตือน ('jQuery เป็นสิ่งจำเป็น')} jQuery (function () {factory.call (null, jQuery);});}) (ฟังก์ชั่น ($) {// // - - - ข้อผิดพลาด ('webploader ไม่สนับสนุนเบราว์เซอร์ที่คุณใช้')} // hook, // crop ก่อนที่ไฟล์จะเริ่มอัปโหลด _.deferred (); ภาพ = ใหม่ _.lib.image (); }); image.once ('เสร็จสิ้น', ฟังก์ชั่น () {var blob, ขนาด; // เบราว์เซอร์ UC / QQ มือถือในโหมดปราศจากภาพ // ctx.getimagedata จะรายงานข้อยกเว้นเมื่อประมวลผลภาพขนาดใหญ่ // index_size_err: dom exception 1 ลอง {blob = image.size. 'resize', blob.size, ขนาด); file._meta); FALSE, // ว่าจะใช้โหมดการเพาะปลูก $ .Trim ($ ("#base_url"). val ()) + '/static/webuploader/uploader.swf', fileenumlimit: 1, // ไฟล์รูปภาพเท่านั้นที่ได้รับอนุญาต 'jpg, jpeg, png', // แก้ปัญหา webploader chrome คลิกกล่องเลือกไฟล์อัปโหลดเพื่อชะลอเวลาไม่กี่วินาทีก่อนที่การตอบสนองจะช้าลง mimetypes: 'image/jpg, image/jpeg, image/png' // // // chunked: true, // shash // chunksize: 10 * 1024 * 1024, // shash ขนาดระบุ // เธรด: 1, // จำนวนเธรด // disableglobaldnd: true // disable // onerror: function () {// var args =.]. }}); uploader.on ('filequeued', ฟังก์ชั่น (_file) {file = _file; uploader.makethumb (ไฟล์, ฟังก์ชั่น (ข้อผิดพลาด, src) {ถ้า (ข้อผิดพลาด) }; 'uploadsuccess', ฟังก์ชั่น (ไฟล์) {showinfo ("uploadsuccess"); file._info.width; data.scale = scale; -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- var btn = $ ('. upload-btn'); var isbase64supported, callback; $ image.cropper ({aspectratio: 4 /4, ตัวอย่าง: ".img-preview", ทำ: ฟังก์ชั่น (ข้อมูล) {// console.log (data);}}); ฟังก์ชั่น srcwrap (src, cb) {// เราจำเป็นต้องตรวจสอบสิ่งนี้ในครั้งแรก if (typeof isBase64Supported === 'undefined') {(function () {var data = ภาพใหม่ (); var support = true; data.onload = data.onerror = function () {ถ้า (this.width! = 1 || this.height! = 1) {support = false; } if (isBase64Supported) {cb (src); } else {// มิฉะนั้นเราต้องการการสนับสนุนเซิร์ฟเวอร์ // แปลง Base64 เป็นไฟล์ // $ .ajax ('', {// เมธอด: 'โพสต์', // data: src, // datatype: 'json' //}). เสร็จสิ้น (ฟังก์ชั่น (การตอบสนอง) {// ถ้า (response.result) {// cb (response.result); }} btn.on ('คลิก', function () {callback && callback ($ image.cropper ("getData")); return false;}); return {setSource: function (src) {// handle base64 ไม่รองรับ // โดยทั่วไปเกิดขึ้นใน IE6-IE8 SRCWRAP (SRC, ฟังก์ชัน (SRC) {$ image.cropper ("setimgsrc", src);}); container.removeclass ('webploader-etement-invisible'); คืนสิ่งนี้; }, getImagesize: function () {var img = $ image.get (0); return {width: img.naturalWidth, ความสูง: img.naturalheight}}, setCallback: ฟังก์ชั่น (cb) {callback = cb; คืนสิ่งนี้; }, ปิดการใช้งาน: function () {$ image.cropper ("ปิดใช้งาน"); คืนสิ่งนี้; }, เปิดใช้งาน: function () {$ image.cropper ("เปิดใช้งาน"); คืนสิ่งนี้; - - - uploader.crop (ข้อมูล); uploader.upload (); - - - -นอกจากนี้ยังมีบางรหัสสำหรับหน้า:
นี่คือรหัสสำหรับส่วนคอนโทรลเลอร์:
@RequestMapping (value = "/student/studentimgfileupload", method = requestmethod.post) @responsebody String studentimgfileupload (@requestparam multipartfile ไฟล์ httpservletrequest) {logger.info ( logger.info ("อัปโหลดชื่อไฟล์:" + OriginalFileName) สตริง realPath = request.getServletContext (). getRealPath ("/สาธารณะ/นักเรียน/") สตริง uploadfilename = system.currentTimeLis () + "_" ไฟล์ RandomAccessFile rafile = null bufferedInputStream inputStream = null ลอง {ไฟล์ dirfile = ไฟล์ใหม่ (realpath, uploadfileName) // เปิดไฟล์เป้าหมายในรูปแบบการอ่าน-เขียน rafile = new RandomActSfile (dirfile, "rw") rafile.seek ไบต์ [] buf = ไบต์ใหม่ [1024] ความยาว int = 0 ในขณะที่ ((length = inputstream.read (buf))! = -1) {rafile.write (buf, 0, ความยาว)}} catch (exception e) {flag = false logger.info ( (inputStream! = null) {inputStream.close ()} ถ้า (rafile! = null) {rafile.close ()}} catch (ข้อยกเว้น e) {flag = false logger.info ("อัพโหลดข้อผิดพลาด:" + e.getMessage ())สิ่งนี้ใช้ฟังก์ชั่นการใช้ WebPloader สำหรับการอัปโหลดไฟล์ในโครงการ Spring Boot
สรุป
ด้านบนเป็นรองเท้าสปริงที่แนะนำโดยตัวแก้ไข ใช้ webPloader เพื่ออัปโหลดไฟล์ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!