ก่อนอื่นให้ทิ้งที่อยู่ http://fex-team.github.io/webuploader/
มีเอกสารกรณีตัวอย่างที่ค่อนข้างสมบูรณ์ บทความนี้ส่วนใหญ่จะเพิ่มความคิดเห็นจำนวนมากตามการอัปโหลดไฟล์และการอัปโหลดรูปภาพซึ่งโดยทั่วไปทำให้มั่นใจได้ว่าแต่ละบรรทัดของรหัสมีความคิดเห็นเพื่อช่วยให้เข้าใจ มันเป็นเวอร์ชันที่ได้รับการปรับปรุงการสาธิตเว็บไซต์อย่างเป็นทางการ ฉันหวังว่ามันจะช่วยให้ทุกคนเข้าใจปลั๊กอินได้ดีขึ้น
ขั้นแรก ให้อัปโหลดไฟล์
jQuery (function () {var $ = jQuery, $ list = $ ('#thelist'), $ btn = $ ('#ctlbtn'), state = 'รอการดำเนินการ', uploader; // การเริ่มต้นจริง ๆ '/js/uploader.swf', // ส่งไปยังรหัสพื้นหลังสำหรับการประมวลผลและบันทึกไปยังเซิร์ฟเวอร์เซิร์ฟเวอร์: 'http://webuploader.duapp.com/server/fileupload.php', // เลือกปุ่มหรือไม่ Uploader เพิ่มเหตุการณ์ '<p> รอการอัปโหลด ... </p>' + '</div>'); // ค้นหาความคืบหน้าของคลาสภายใต้ $ li และกำหนดเป็น $ เปอร์เซ็นต์ ------ ทำไมมองหาการสร้าง $ เปอร์เซ็นต์ = $ li.find (. ความคืบหน้า. progress-bar '); '</div>'). ภาคผนวก ($ li) .find ('. progress-bar'); Uploader Uploader.on ('UploadSuccess' สำเร็จฟังก์ชั่น (ไฟล์) {// เหตุการณ์ที่เกิดขึ้นเมื่อเพิ่มไฟล์ค้นหาและเพิ่มข้อความเป็น $ ('#'+file.id). Find ('P.State') ข้อความ (uploaded '); 'uploaderror', ฟังก์ชั่น (ไฟล์) {// เหตุการณ์ที่เกิดขึ้นเมื่อมีการเพิ่มไฟล์ค้นหาและเพิ่มข้อความเป็นข้อผิดพลาดการอัปโหลด $ ('#'+file.id). Find ('P.State') ไฟล์) {// call $ (#'+file.id) .find ('. progress '). fadeout ();}); อื่น ๆ (type === 'stopupload') {state = 'หยุดชั่วคราว'; คลิกปุ่มการอัปโหลดเริ่มต้นตามสถานะหรือหยุดชั่วคราว $ btn.on ('คลิก' ฟังก์ชัน () {ถ้า (state === 'อัปโหลด') {uploader.stop ();} else {uploader.upload ();}});});จากนั้นอัปโหลดรูปภาพ
jQuery (function () {// กำหนด jQuery ให้กับตัวแปร global var $ = jQuery, $ list = $ ('#filelist'), // การเพิ่มประสิทธิภาพเรตินาภายใต้เรตินาค่านี้คือ 2 อัตราส่วนอัตราส่วนพิกเซลของอุปกรณ์ = 100 * การอัปโหลดอินสแตนซ์ของเว็บอัพโหลด; 'http://webuploader.duapp.com/server/fileupload.php', // เลือกปุ่มไฟล์ 'gif, jpg, jpeg, bmp, png', mimetypes: 'image/*'}}); ข้อมูล '<div>' + file.name + '</div>' + '</div>'), $ img = $ li.find ('img'); การโต้ตอบ // การเรียกกลับมีสองพารามิเตอร์ ThumbnailHeight); $ ('<p> <pan> </span> </p>') .appendto ($ li) .find ('span'); '#' file.id) .AddClass ('Upload-State-Done'); $ ('<div> </div>'). ภาคผนวก ($ li);ด้านล่างคือรหัสพื้นหลัง Java ที่ใช้เพื่อรับไฟล์ที่อัปโหลดและเขียนเส้นทางจริงของไฟล์ที่อัปโหลดไปยังเซิร์ฟเวอร์
1. ก่อนอื่นเราควรสร้างตำแหน่งที่เก็บข้อมูลสำหรับไฟล์ที่อัปโหลด ตำแหน่งทั่วไปแบ่งออกเป็นโฟลเดอร์ชั่วคราวและจริง จากนั้นเราต้องได้รับเส้นทางที่แน่นอนของโฟลเดอร์ทั้งสองนี้ ใน servlet เราสามารถทำได้
แอปพลิเคชัน servletContext = this.getServletContext (); String tempDirectory = application.getRealPath (constant.temp_directory) + "/"; string realdirectory = application.getRealPath (constant.real_directory) + "/";
จากนั้นสร้างโรงงานไฟล์นั่นคือคลังสินค้าพารามิเตอร์ระบุว่ามันใหญ่แค่ไหนในการจัดเก็บฟลัช
การคัดลอกรหัสมีดังนี้: FileItemFactory Factory = ใหม่ diskFileItemFactory (constant.size_threshold, ไฟล์ใหม่ (tempdirectory));
ServletFileUpload Upload = ใหม่ servletFilePilePload (โรงงาน);
2. ตั้งค่าไฟล์ที่อัปโหลด
Upload.SetSizemax (500*1024*1024); // ตั้งค่าสูงสุดของการอัปโหลดนี้เป็น 500m3, แยกวิเคราะห์ร่างกายคำขอรับไฟล์อัปโหลดและเขียนเส้นทางจริงโดยไม่ต้องโยนข้อยกเว้น
รายการ <fileItem> list = upload.parserequest (คำขอ); Iterator <fileItem> iter = list.iterator (); ในขณะที่ (iter.hasnext ()) {fileItem item = iter.next (); //item.isformfield () ใช้เพื่อตรวจสอบว่าวัตถุปัจจุบันเป็นข้อมูลของฟิลด์ฟอร์มไฟล์หรือไม่ หากค่าส่งคืนเป็นจริงหมายความว่าไม่ใช่ฟิลด์ฟอร์มปกติถ้า (item.isformfield ()) {system.out.println ("ฟิลด์ฟอร์มปกติ" +item.getfieldName ()); System.out.println (item.getString ("UTF-8")); } else {//system.out.println("file ฟิลด์ฟิลด์ " + item.getFieldName ()); /** เฉพาะฟิลด์ฟอร์มไฟล์เท่านั้นที่เขียนเนื้อหาในวัตถุไปยังโฟลเดอร์จริง*/string lastPath = item.getName (); // รับชื่อของไฟล์ที่อัปโหลด LastPath = LastPath.SubString String filename = uuid.randomuuid (). toString (). แทนที่ ("-", "") + lastPath; item.write (ไฟล์ใหม่ (realdirectory+filename)); แพ็คเกจ com.lanyou.support.servlet; นำเข้า java.io.file; นำเข้า java.io.ioexception; นำเข้า java.io.printwriter; นำเข้า java.util.list; นำเข้า javax.servlet.servletexception; javax.servlet.http.htttservletrequest; นำเข้า Javax.servlet.http.httpservletResponse; นำเข้า net.sf.json.jsonObject; นำเข้า org.apache.commons.fileupload.fileitem; org.apache.commons.fileupload.disk.diskfileitemfactory; นำเข้า org.apache.commons.fileupload.servlet.servletFileUpload; นำเข้า org.apache.Commons.logging.log; org.apache.struts2.servletactionContext; ไฟล์ระดับสาธารณะ Fileupload ขยาย httpservlet {ส่วนตัวคงที่สุดท้าย Long SerialVersionUID = 1L; logger log static ส่วนตัว = logfactory.getLog (fileupload.class); @Override Void Doget (httpservletrequest REQ, httpservletResponse resp) โยน servletexception, ioexception {dopost (req, resp); } @Override void dopost (httpservletrequest req, httpservletResponse resp) พ่น servletexception, ioexception {// อัปโหลดไฟล์ด้วยเหตุการณ์ประเภท 1 2apk สตริง t = req.getParameter ("t") == null? "1": req.getParameter ("t") .Trim (); String path = ""; jsonObject ob = new JsonObject (); ลอง {// task เพื่อห่อหุ้มแต่ละรายการในข้อความคำขอลงในวัตถุ diskfileitem แยกต่างหาก // บันทึกในหน่วยความจำเมื่อรายการไฟล์ที่อัปโหลดมีขนาดเล็กและบันทึกไว้ในดิสก์เมื่อดิสก์เป็น zero.//create คลังสินค้าไฟล์ ServletFilePload servletFileUpload = ใหม่ servletFileUpload (โรงงาน); // ตั้งค่าไฟล์ที่อัปโหลด servletFileUpload.SetSizeMax (1024 * 1024 * 2); // สูงสุด 2m data servletFilePilePilePload.setFilesizeMax (2 * 1024 * 1024); servletfileupload.setheaderencoding ("UTF-8"); // แก้ปัญหาชื่อไฟล์ที่อ่านไม่ออก // แก้ปัญหาร่างกายรับไฟล์ที่อัปโหลดและเขียนเส้นทางจริงหากไม่มีข้อยกเว้นถูกโยนลง // รับรายการไฟล์ตามรายการคำขอ // ดึงวัตถุไฟล์แยกต่างหากจากรายการไฟล์สำหรับ (FileItem item: fileItemSlist) {// กำหนดว่าไฟล์เป็นประเภทแบบฟอร์มธรรมดาหรือไม่ที่ประเภทไฟล์จะเข้าสู่การตัดสินถ้า (! } // system.out.println ("ขนาดของไฟล์ที่อัปโหลด:"+item.getSize ()); // system.out.println ("อัปโหลดประเภทไฟล์:"+item.getContentType ()); // system.out.println ("อัปโหลดชื่อไฟล์:"+item.getName ()); // อัปโหลดชื่อสตริงชื่อไฟล์ = item.getName (); string ent = ""; // ประเภทเนื้อหาถ้า (item.getContentType (). equalsignorecase ("image/x-png") || item.getContentType (). equalsignorecase ("image/png")) {ent = ".png"; } อื่นถ้า (item.getContentType (). equalsignorecase ("image/gif")) {ent = ".gif"; } อื่นถ้า (item.getContentType (). equalsignorecase ("image/bmp")) {ent = ".bmp"; } อื่นถ้า (item.getContentType (). equalsignorecase ("image/pjpeg") || item.getContentType (). equalsignorecase ("image/jpeg")) {ent = ".jpg"; } // รูปแบบใดที่ได้รับไฟล์ถ้า (filename.lastindexof (".")! = -1) {ent = filename.substring (filename.lastindexof (".")); } filename = "ev_" + system.currentTimeMillis () + ent; // กำหนดพา ธ ไฟล์ขึ้นอยู่กับโครงสร้างโฟลเดอร์ของคุณคุณอาจต้องทำการเปลี่ยนแปลงถ้า (t.equals ("1")) {path = "upload/ev/" + ชื่อไฟล์; } else {path = "อัปโหลด/pk/" + ชื่อไฟล์; } // บันทึกไฟล์ไปยังไฟล์เซิร์ฟเวอร์ไฟล์ = ไฟล์ใหม่ (req.getSession (). getServletContext () .getRealPath (พา ธ )); if (! file.getParentFile (). มีอยู่ ()) {file.getParentFile (). mkdirs (); } item.write (ไฟล์); // logger.info (เส้นทาง); // หยุดพัก; ob.ccumulate ("url", เส้นทาง); }} resp.setContentType ("text/html; charset = utf-8"); resp.getWriter (). เขียน (ob.toString ()); } catch (exception e) {e.printstacktrace (); } ในที่สุด {// การตอบสนองไคลเอนต์ // resp.setContentType ("ข้อความ/html; charset = utf-8"); // resp.getWriter (). เขียน (ob.toString ()); -ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น