1. คำอธิบายของเหตุผลในการใช้ปลั๊กอิน webPloader
ฉันถูกโกงโดยโครงการที่ฉันทำอยู่ตอนนี้
ก่อนอื่นให้ฉันพูดคุยเกี่ยวกับสถาปัตยกรรมโครงการของฉัน Spring+Struts2+mybatis+mysql
แล้วอะไร มันตกลงกันว่ามันจะเพียงพอที่จะอัปโหลดตาม 2G ดังนั้นฉันจึงใช้ปลั๊กอิน AjaxFilePilePload เนื่องจากฉันใช้สิ่งนี้เพื่ออัปโหลดรูปภาพมาก่อนฉันจึงใช้มันโดยตรงเมื่ออัปโหลดไฟล์แนบ
มีการทดสอบรหัสและรหัสต่างๆ ไม่มีปัญหากับการอัปโหลดไฟล์ 2G เคล็ดลับมา หลังจากเปิดตัวโครงการลูกค้าขอให้อัปโหลดไฟล์ 4G และมีมากกว่า 20 กรัม - นานี่คุณไม่ได้พูดก่อนหน้านี้ - -
ภายใต้ IE11 ให้ใช้ปลั๊กอิน AjaxFilePilePload.js เพื่ออัปโหลดไฟล์ที่เกิน 4G และ IE ได้ทำการยกเว้นโดยตรง ข้อความที่มีผลลัพธ์ทางคณิตศาสตร์เกินป๊อปอัพ 32 บิต
ดังที่แสดงในรูปด้านล่าง:
ในฐานะที่เป็นบันทึกเพิ่มเติมระบบของฉันคือ 64 บิต, 8G หน่วยความจำ, Google เบราว์เซอร์และเบราว์เซอร์ IE11 ทั้งหมด 32 บิต เป็นปัญหาในการอัปโหลด 8G โดยใช้ AjaxFilePlipload ภายใต้ Google จะไม่มีการรายงานข้อผิดพลาด
IE11 มีมากกว่า 4G และผิดที่จะรายงานภาพด้านบนโดยตรง ไม่มีทาง. เปลี่ยนปลั๊กอิน
2. การเลือกปลั๊กอิน
1. ปลั๊กอินอัปโหลดสตรีม สตรีมเป็นปลั๊กอินเพื่อแก้ปัญหาการอัปโหลดไฟล์โดยเบราว์เซอร์อื่น เป็นการผสมผสานระหว่าง Flash ของ Uploadify และ HTML5 ที่อยู่ปลั๊กอิน http://www.twinkling.cn/
ฟังก์ชั่นนี้มีประสิทธิภาพมาก แต่สไตล์ CSS ได้รับการแก้ไขซึ่งแตกต่างจากสไตล์แถบความคืบหน้าของโครงการปัจจุบันของฉัน ยอมแพ้ปลั๊กอินนี้
2. ปลั๊กอิน Webuploader WebPloader เป็นส่วนประกอบการอัปโหลดไฟล์ที่ทันสมัยอย่างง่าย ๆ ส่วนใหญ่ HTML5 และเสริมโดย Flash ที่พัฒนาโดยทีม Baidu Webfe (FEX) ในเบราว์เซอร์ที่ทันสมัยเราสามารถให้ข้อดีอย่างเต็มที่กับข้อดีของ HTML5 ในขณะที่ไม่ละทิ้งเบราว์เซอร์ IE หลักและใช้งาน Flash Runtime ดั้งเดิมต่อไปและเข้ากันได้กับ IE6+, iOS 6+ และ Android 4+ ผู้ใช้สามารถเลือกวิธีการโทรแบบเดียวกันได้
การใช้การกระจายตัวของไฟล์ขนาดใหญ่การอัปโหลดพร้อมกันช่วยปรับปรุงประสิทธิภาพของการอัปโหลดไฟล์อย่างมาก ที่อยู่ปลั๊กอิน http://fex.baidu.com/webuploader/
ปลั๊กอินนี้สามารถปรับแต่งสไตล์ CSS ฟังก์ชั่นนี้มีประสิทธิภาพมากดังนั้นฉันจึงใช้ปลั๊กอินนี้อย่างเด็ดขาด
3. การอัปโหลดไฟล์เดียว webploader
ฉันใช้ WebPloader เวอร์ชัน 0.1.5 WebPloader ส่วนใหญ่จะแบ่งไฟล์ขนาดใหญ่บนไคลเอนต์เช่นการส่งคำขอสำหรับการแยกทุก 5 เมตรและรับไฟล์จากพื้นหลังเพื่อรวมไฟล์ มีสองวิธีในการรวมไฟล์ อย่างแรกคือการส่งเศษทั้งหมดไปยังพื้นหลังแล้วรวมเข้าด้วยกัน นี่คือเพื่อให้แน่ใจว่าคำสั่งซื้อที่ถูกต้องและที่สองคือการรวมในขณะที่ sharding ฉันใช้อันที่สองในโครงการ การอัปโหลดไฟล์โดยใช้ Web Uploader ต้องใช้ทรัพยากรสามอย่าง: JS, CSS และ SWF
1. แนะนำไฟล์ JS
<script type = "text/javascript" src = "../ main/js/webuploader.js"> </script> <script type = "text/javascript" src = "../ main/js/webuploader.min.js"> </script>
2. แนะนำสไตล์ CSS
<link href = "../ main/css/webploader.css" rel = "stylesheet" type = "text/css"/>
3. แนะนำ SWF SWF ไม่ได้อ้างถึงโดยตรง เพียงระบุเส้นทาง SWF เมื่อมีการเริ่มต้น webploader
4.upload3.html
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> xmlns = "http://www.w3.org/1999/xhtml" xml: lang = "ja" lang = "ja"> <head> <meta http-equiv = "content-type" contents = "ข้อความ/html; /> <meta http-equiv = "content-script-type" content = "text/javaScript"/> <meta http-equiv = "content-type ental-type" content = "text/css"/> <title> demo </title> <link href = " /> <link href = "../ main/css/webploader.css" rel = "stylesheet" type = "text/css"/> <script type = "text/javascript" src = "../ main/js/jQuery-12.1.1.min.js" src = "../ main/js/jQuery-2.1.4.min.js"> </script> <script type = "text/javascript" src = "../ main/js/jquery-ui.min.js"> </script> <script type = "ข้อความ/javascript" src = "../ main/js/bootstrap-datepicker.min.js"> </script> <script type = "text/javascript" src = "../ main/js/bootstrap-datepicker.min.js"> </script> <script type = "text/javascript src = "../ main/js/loclees/bootstrap-datepicker.ja.min.js"> </script> <script type = "text/javascript" src = "../ main/js/webploader.js"> </script> <script type = "text/javascript" src = "../ main/js/webploader.min.js"> </script> <script type = "text/javascript" src = "../ js/contents/upload3 id = "แนบ"> </div> <อินพุต type = "ปุ่ม" value = "อัปโหลด" id = "อัปโหลด"/> </div> </div> <div id = "uploader1"> <! --- ใช้เพื่อเก็บข้อมูลไฟล์-> <div id = "thelist1"> </div> </div> </div> </body> </html>
ภาพค่อนข้างง่ายดูเหมือนว่าแบบนี้
5.UPLOAD3.JS
รวมถึงการอัปโหลดไฟล์เดียวการอัปโหลดแบบหลายไฟล์และหลายอินสแตนซ์ของ webPloader
/***************************************************************************************************************************************************************************************************** ไม่มีประโยชน์ // Fileval: 'Multifile', // ปรับแต่งแอตทริบิวต์ชื่อของไฟล์ ไม่สามารถเรียกคืนไฟล์ได้เมื่อใช้ไฟล์ // ขอแนะนำให้ผู้เขียนมีเวลาเปลี่ยนสถานที่นี้มันจะฆ่าคน เซิร์ฟเวอร์: "contentsdetail! ajaxattachupupload.action", ซ้ำกัน: จริง, // คือไฟล์เดียวกันปรับขนาด: false, formdata: {"สถานะ": "ไฟล์", "contentsdto.contentsid": "0000004730", "uploadnum": "00004730" chunked: จริง, // Shash Processing Chunksize: 5 * 1024 * 1024, // 5m ต่อชิ้นส่วน chunkretry: false, // ถ้ามันล้มเหลวอย่าลองเธรด: 1, // อัปโหลดหมายเลขพร้อมกัน จำนวนกระบวนการอัปโหลดสูงสุดที่อนุญาตในเวลาเดียวกัน // RuntimeRorder: 'Flash', // ปิดการใช้งานฟังก์ชั่นการลากทั่วโลก สิ่งนี้จะไม่ปรากฏขึ้นเมื่อภาพถูกลากเข้าไปในหน้าเปิดภาพ DisableGlobaldnd: true}); // เมื่อมีการเพิ่มไฟล์, uploader.on ("filequeued", function (ไฟล์) {console.log ("filequeued:"); $ list.append ("<div id = '" file.id + "' class = 'item'>" + "<h4 class = 'info'>" +"</div>");}); // เมื่ออัปโหลดไฟล์ทั้งหมดอัพโหลด uploader.on ("อัปโหลดฟิน", function () {console.log ("uploadfinished:");}) // เมื่อไฟล์ถูกอัปโหลดไปยังการตอบสนองของเซิร์ฟเวอร์ uploader.on ("Uploadaccept", ฟังก์ชั่น (วัตถุ, ret) {// เซิร์ฟเวอร์ตอบกลับ //ret._raw คล้ายกับ datavar data = json.parse (ret._raw); ถ้า (data.resultcode! = "1" && data.resultcode! = "3") "9") {uploader.reset (); แจ้งเตือน ("ข้อผิดพลาด"); return false;}} else {// e05017uploader.reset (); แจ้งเตือน ("ข้อผิดพลาด"); return;}}) // ฟรีเมื่อการอัปโหลดไฟล์สำเร็จ uploader.on ("uploadsuccess", ฟังก์ชั่น (ไฟล์) {$ ("#"+file.id) .find ("P.State") ข้อความ ("อัปโหลด");}); uploader.on ("uploaderror", ฟังก์ชั่น (ไฟล์) {$ ("#"+file.id) ข้อผิดพลาด "); uploader.cancelfile (ไฟล์); uploader.removefile (ไฟล์, จริง); uploader.reset ();}); $ ("#อัปโหลด "). on (" คลิก ", ฟังก์ชัน () {uploader.upload ();});/*********************************** อัปโหลดสิ้นสุด ************************************************************************************************************************************************************************************************************* = 0; // ขนาดไฟล์ทั้งหมด var filename = []; '../../main/js/uploader.swf', เซิร์ฟเวอร์: "contentsdetail! multiupload.action", ซ้ำกัน: true, // เป็นไฟล์ที่ปรับขนาดเดียวกัน: false, formData: {"สถานะ": "multi", "contentsdto.contentsid": "0000004730", "uploadnum": "00004730", "มีอยู่ flg": ล้มเหลวอย่าลองเธรดอีกครั้ง: 1, // อัปโหลดหมายเลขพร้อมกัน จำนวนกระบวนการอัปโหลดสูงสุดที่อนุญาตในเวลาเดียวกัน // fileenumlimit: 50, // ตรวจสอบจำนวนไฟล์ทั้งหมด หากเกินกว่าจะไม่ได้รับอนุญาตให้เข้าร่วมคิว // runtimeRorder: 'แฟลช', // ปิดการใช้งานฟังก์ชั่นการลากและวางทั่วโลก ด้วยวิธีนี้เมื่อภาพถูกลากเข้าไปในหน้าเปิดภาพ DisableGlobaldnd: true}); // เมื่อเพิ่มไฟล์, uploader.on ("filequeued", ฟังก์ชัน (ไฟล์) {console.log ("filequeued:"); $ list.append ("<div id = '" file.id + "' class = 'item'>" + "<h4 class = 'info'>" +"</div>");}); // เมื่อตัวอัปโหลดเริ่มต้นขึ้น uploader.on ("startupload", function () {console.log ("startupload"); // เพิ่มพารามิเตอร์ฟอร์มเพิ่มเติม $. extend (จริง, uploader.options.formdata, {"filesize": filesize, "multifilename": filename.join (","), "filesizeOneByone": filesizeOneByone.join (",")}); uploader.on ("Uploadaccept", ฟังก์ชั่น (วัตถุ, ret) {// เซิร์ฟเวอร์ตอบกลับ //ret._raw คล้ายกับ dataconsole.log ("uploadaccept"); console.log (ret); var data = json.parse (ret._raw); ถ้า (data.resultcode! ! = "3") {ถ้า (data.resultCode == "9") {แจ้งเตือน ("ข้อผิดพลาด"); uploader.reset (); return;}} else {uploader.reset (); แจ้งเตือน ("ข้อผิดพลาด");}}) uploader.on ) .find ("p.state"). ข้อความ ("อัปโหลด");}); uploader.on ("uploaderror", ฟังก์ชั่น (ไฟล์, เหตุผล) {$ ("#"+file.id) .find ("p.state") ข้อความ ("uploaderRor"); console.log (ไฟล์) = 0; i <filearray.length; i ++) {uploader.cancelfile (filearray [i]); uploader.removefile (filearray [i], true);} uploader.reset (); filesize = 0; filename = []; uploader.on ("ข้อผิดพลาด", function () {console.log ("ข้อผิดพลาด"); uploader.reset (); filesize = 0; filename = []; filesizeOneByone = []; แจ้งเตือน ("ข้อผิดพลาด");}) // $ ("#multi .webuploader-pick") คลิก (ฟังก์ชั่น () {uploader.reset (); filesize = 0; filename = []; filesizeOneByOne = []; $ ("#multi: file") คลิก () "code}" {var filearray1 = uploader.getFiles (); สำหรับ (var i = 0; i <filearray1.length; i ++) {// ใช้ไฟล์ += filearray1 [i] .size; filesizeOneByone.push (filearray1 [i] .size); filename.push (filearray1 [i] .name);} console.log (ไฟล์); console.log (filesize); console.log อัปโหลด*/$ ("อินพุต [name = 'multiUpload']") on ("คลิก", function () {uploader.upload ();})});/********************************************************* สิ้นสุด ********************************************************************************************************************************************************************************************* LastModifiedDate = [Wed Apr 27 2016 16:45:01 GMT+0800 (เวลามาตรฐานจีน)], chunks = [3], chunk = [0], type = [เสียง/wav], uid = [yangl], id = [wu_file_0], ขนาด = [268620636 contentsdto.contentsid = [0000004730], มีอยู่ fflg = [false], สถานะ = [ไฟล์], uploadnum = [0000004730]} *************************************************************************************************************************************************************6.ContentsDetail.action
// ไฟล์เดี่ยวอัพโหลดรหัสพื้นหลังรหัสสาธารณะโมฆะ ajaxattachupload () {String path = "d: // test //"+filefilename; ลอง {ไฟล์ไฟล์ = this.getFile (); fileutil.randomaccessFile (พา ธ ไฟล์); // ถ้าไฟล์มีขนาดเล็กและ 5m nullif (stringutils.isempty (chunk)) {outjson ("0", "ความสำเร็จ", "");} else {// chunk shard index, ตัวห้อยเริ่มต้นจาก 0 // chunks จำนวนเศษรวมถ้า (integer.valueof (chunk) == "");} else {outjson ("2", "อัปโหลด" + filefilename + "chunk:" + chunk, "");}}} catch (ข้อยกเว้น e) {outjson ("3", "อัพโหลดล้มเหลว", ");}}}}}}fileutil.java
/*** ระบุตำแหน่งที่จะเริ่มเขียนไฟล์* @param tempfile ไฟล์อินพุต* @param outpath พา ธ ไปยังไฟล์เอาต์พุต (เส้นทาง + ชื่อไฟล์)* @throws ioexception*/โมฆะแบบคงที่สาธารณะแบบสุ่ม ไฟล์ (outpath); // เปิดไฟล์เป้าหมายในการอ่านและเขียน rafile = new randomaccessFile (dirfile, "rw"); rafile.seek (rafile.length ()); inputstream = ใหม่ bufferedInputStream (ใหม่ fileInputStream (tempfile)); byte [] buf = byte ใหม่ [1024]; ความยาว int = 0; ในขณะที่ (ความยาว = inputStream.read (buf))! = -1) {rafile.write ioException (e.getMessage ());} ในที่สุด {ลอง {ถ้า (inputStream! = null) {inputStream.close ();} ถ้า (rafile! = null) {rafile.close ();}} catch (ยกเว้น e) {โยน ioexception ใหม่ 7. ภาพเอฟเฟกต์
ข้างต้นเป็นความรู้ที่เกี่ยวข้องเกี่ยวกับวิธีการอัปโหลดไฟล์ขนาดใหญ่ไฟล์เดียวและหลายไฟล์ใน Java ที่แนะนำโดยตัวแก้ไข ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับทุกคนในเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!