1. การนำเข้าทรัพยากร
2. รหัส JSP
<div> <dable> <span>*</span> ชื่อโครงการ: </label> <div> <อินพุตประเภท = "text" value = "$ {proname}" placeholder = "" id = "" name = "proname" readonly = "readonly"> </div> id = "filelist"> </div> <div> <div id = "filepicker"> เลือกรูปภาพ </div> <button id = "btn-star"> เริ่มอัปโหลด </button> </div> </div> </div> <divel> <span>*</span> id = "filepicker-2"> </div> <p> หรือลากรูปภาพได้ที่นี่คุณสามารถเลือกภาพถ่ายได้สูงสุด 300 ภาพในครั้งเดียว </p> </div> </div> <div style = "แสดง: ไม่มี"> <div> <span> 0%</span> <span> การอัปโหลด </div> </div> </div> </div> </div> </div> </div> <div> <ปุ่ม onclick = "article_add ('', 'invoicevo/บันทึก? & projectId = $ {projectId} & invoicesCan =' type = "ปุ่ม"> <i> </i> บันทึก </button> </div> </div> </div> 3. รหัส JS
<script type = "text/javascript"> var imagePath = null; Function article_save () {Alert ("เลเยอร์กระสุนจะถูกปิดโดยอัตโนมัติเมื่อรีเฟรชพาเรนต์"); window.parent.location.reload (); } /*Project Invoice-Add* / function article_add (ชื่อ, url, w, h) {ถ้า (imagepath) {var index = layer.open ({ประเภท: 2, ชื่อ: ชื่อ, เนื้อหา: url+imagepath}); layer.full (ดัชนี); } else {Alert ("ไม่มีการอัปโหลดรูปภาพโปรดอัปโหลดภาพก่อน");}} $ (function () {$ ('อินพุต skin-minimal'). icheck ({checkboxclass: 'icheckbox-blue', radioclass: 'iradio-blue', uperearea: '20%' $ ("#btn-star"), state = "รอดำเนินการ", อัพโหลด; เซิร์ฟเวอร์ 'gif, jpg, jpeg, bmp, png', mimetypes: 'image/*'}}); '</div>' + '<p> รอการอัปโหลด ... </p>' + '</div>'), $ img = $ li.find ( src) {ถ้าข้อผิดพลาด) {$ img.replacewith ('<span> ไม่สามารถดูตัวอย่างได้ {var $ li = $ ('#' + file.id), $ เปอร์เซ็นต์ = $ li .find ('. progress-box .sr-only'); $ li.find (". state") ข้อความ ("อัปโหลด"); file.id) .addclass ('Upload-State-Success') .Find (". state"). ข้อความ ("อัปโหลด"); ข้อผิดพลาด ");}); // หลังจากการอัปโหลดเสร็จสมบูรณ์แล้วจะสำเร็จหรือล้มเหลวให้ลบแถบความคืบหน้าก่อน uploader.on ('uploadcomplete', ฟังก์ชั่น (ไฟล์) {$ ('#' + file.id) .find ('. progress-box') 'การอัปโหลด'; $ btn.on ('คลิก', function () {if (state === 'uploading') {uploader.stop ();} else {uploader.upload ();}});}); (ฟังก์ชั่น ($) {// การเริ่มต้นเริ่มต้นเมื่อ domready {var $ wrap = $ ('. uploader-list-container'), // picture container $ queue = $ ('<ul> </ul>') ภาคผนวก ข้อมูล = 0, // การเพิ่มประสิทธิภาพเรตินา, ภายใต้เรตินา, ค่านี้คือ 2 อัตราส่วน = window.devicePixelRatio || ตรวจสอบว่าเบราว์เซอร์รองรับ Image Base64 issupportBase64 = (ฟังก์ชัน () {var data = ภาพใหม่ (); var support = true; data.onload = data.onerror = function () {ถ้า (this.width! = 1 | "ข้อมูล: ภาพ/gif; base64, r0lgodlhaqabaaaaaaaap /// ywaaaaaqabaaacauwaow =="; เวอร์ชัน. description; supportTransition = (function () {var s = document.createelement ('p'). สไตล์, r = 'transition' ใน s || 'webkittransition' ใน s || 'moztransition' ใน s || 'mstransition' ใน S || (! webploader.uploader.support ('flash') && webploader.browser.ie) {// แฟลชถูกติดตั้ง แต่เวอร์ชันต่ำเกินไป 'downder.failed': การติดตั้ง ('การติดตั้งล้มเหลว'); '; ถ้า (webploader.browser.ie) {html + =' classid = "clsid: d27cdb6e-ae6d-11cf-96b8-444553540000" '<param name = "wmode" value = "transparent" />' + '<param name = "wmode" value = "โปร่งใส" />' + '<param name = "wmode" value = "transparent" />' + '<param = "wmode" value = "โปร่งใส" value = "Always"/> ' +' </object> '; src = "http://www.adobe.com/macromedia/style_guide/images/160x41_get_flash_player.jpg"/> </a> '); } // uploader อินสแตนซ์ = webPloader.create ({เลือก: {id: '#filepicker-2', ฉลาก: 'คลิกเพื่อเลือกรูปภาพ'}, formData: {uid: 123}, dnd: '#dndarea', paste: '#uploader' เท็จ, chunksize: 512 * 1024, เซิร์ฟเวอร์: 'InvoiceVo/news_uploder? & projectId = $ {projectId}', // runtimeRorder: 'flash', // ยอมรับ: {// title: 'images', // extensions: 'gif, jpg, jpg ฟังก์ชั่นการลากทั่วโลก uploader.on ('dndaccept', ฟังก์ชั่น (รายการ) {var denied = false, len = items.length, i = 0, // แก้ไข js type unallowed = 'text/plain; application/javascript'; สำหรับ (; i <len; i ++) {// ถ้าอยู่ในรายการ ! ถูกปฏิเสธ;}); //}); var $ li = $ ('<li id = "' + file.id + '">' + '<p>' + file.name + '</p>' + '<p> </p>' + '<p> <pan> </span> </p>' + '</li>') '<span> หมุนไปทางซ้าย </span> </div>') .appendto ($ li), $ prgress = $ li .find ('p.progress span'), $ wrap = $ li .find ('p.imgwrap'), $ info = $ ('<p> case 'interrupt': upload pause '; .makethumb (ไฟล์, ฟังก์ชั่น (ข้อผิดพลาด, src) {var img; if (ข้อผิดพลาด) {$ wrap.text ('ไม่สามารถดูตัวอย่าง'); return;} ถ้า (issupportbase64) {img = $ ('<img src = "+src+' '>'); 'lib/webploader/0.1.5/เซิร์ฟเวอร์/preview.php', {วิธี: 'โพสต์', ข้อมูล: src, ข้อมูล: 'json'}) .done (ฟังก์ชั่น (ตอบสนอง) {ถ้า (response.result) {img = $ ('<img src = " {$ wrap. text ("ข้อผิดพลาดตัวอย่าง"); อื่น ๆ (prev === 'queued') {$ li.off ('Mouseenter Mouseleave'); === 'interrupt') {console.log (file.statustext); 'ความคืบหน้า') {$ info.remove (); {$ btns.stop (). animate ({ความสูง: 30});}); uploader.removefile (ไฟล์); '-o-transform': deg, 'transform': deg}); // รับผิดชอบต่อการทำลายฟังก์ชั่นการดูไฟล์ (ไฟล์) {var $ li = $ ('#' + file.id); $ progress.hildren (), เปอร์เซ็นต์; '%'); (stats.uploadfailnum) {text = 'อัพโหลดสำเร็จ' + stats.successnum + 'ไปยังอัลบั้ม xx,' + stats.uploadfailnum + 'การอัปโหลดภาพถ่ายล้มเหลว <a href = "#" rel = "external noflow rel = "external nofollow"> ถูกละเว้น </a> '}} else {atts = uploader.getStats (); Stats.uploadfailnum + 'Zhang'; $ place Holder.RemoVeclass ('Element-Visible'); $ queue.show (); $ upload.Text ('ดำเนินการต่อ'); } break; $ (#' +file.id), $ เปอร์เซ็นต์ = $ li.find ('. ความคืบหน้า '); ; removeFile (ไฟล์); (response.status == "ข้อผิดพลาด") การแจ้งเตือน (Response.error); Break;}}); อัปโหลด} ถ้า (state === 'หยุดชั่วคราว') {uploader.upload (); การแจ้งเตือน ('ToDo'); }) (jQuery); </script> สังเกต:
4. รหัสคอนโทรลเลอร์
/** * ข้ามไปยังหน้าเว็บที่อัพโหลดใบแจ้งหนี้ * @param proname * @param map * @return */@requestmapping (value = "/upload") public String InvoiceUpload (Proname, Proname); Projectservice.getProject (ID); map.put ("projectId", id); return "Project/InvoiceUpload"; }/** * อัปโหลดใบแจ้งหนี้และบันทึกฐานข้อมูล * @param file * @param Request * @param Response * @return */@ResponseBody @RequestMapping (value = "/news_uploder", method = {requestMetHod.post, requestmethod.get} ไฟล์ MultipArtFile [], Long ProjectId, HttpServletRequest Request, การตอบสนอง httpservletResponse) {String Flag = NULL; jsonObject jsonObject = new jsonObject (); ลอง {WebPloaderUtil WebPloaderUtil = ใหม่ webPloaderUtil (); WebPloaderUtil.upload (ไฟล์ [0], "อัปโหลด/ใบแจ้งหนี้/", คำขอ); FLAG = WebPloaderUtil.getFilename (); jsonObject.put ("filepath", ธง); jsonObject.put ("สถานะ", "ความสำเร็จ"); } catch (exception e) {e.printstacktrace (); } return jsonObject; } 5. แพ็คเกจคลาสเครื่องมือ com.softjx.util;/** *ชื่อโครงการ: qdlimap *ชื่อไฟล์: webuploaderutil.java *ชื่อแพ็คเกจ: com.ltmap.platform.cms.util *วันที่ 13 เมษายน 2017 เวลา 6:30:45 น. */ นำเข้า java.io.file; นำเข้า java.text.simpledateFormat; นำเข้า java.util.date; นำเข้า javax.servlet.http.httpservletrequest; นำเข้า org.springframework.web.multipart.multipartfile; /** *title: WebPloaderUtil <br/> *คำอธิบาย: *@Company: litu hi-tech <br/> *@ผู้แต่ง: liu yunsheng *@@เวอร์ชัน: v1.0 *@ตั้งแต่: jdk 1.8.0_40 *@วันที่: 13 เมษายน 2017 เวลา 6:30:45 น. "jpg, png, gif, jpeg"; // อนุญาตให้รูปแบบไฟล์แบบส่วนตัวยาวอนุญาต = 2l; // อนุญาตให้ใช้ชื่อไฟล์สตริงส่วนตัวขนาดไฟล์; สตริงส่วนตัว [] ชื่อไฟล์; สตริงสาธารณะ getAllOwsuffix () {return levereveLuffix; } โมฆะสาธารณะ setAllOwsuffix (สตริงอนุญาตให้ {this.allowsuffix = อนุญาตให้อนุญาต; } public long getAllowsize () {return อนุญาตให้*1024*1024; } โมฆะสาธารณะ setAllowsize (ยาวอนุญาต) {this.allowsize = อนุญาต; } สตริงสาธารณะ getFilename () {return filename; } โมฆะสาธารณะ setFileName (ชื่อไฟล์สตริง) {this.filename = filename; } สตริงสาธารณะ [] getFilenames () {return filenames; } โมฆะสาธารณะ setFilenames (สตริง [] ชื่อไฟล์) {this.filenames = fileNames; } / ** * * @title: getFilenamenew * @description: todo * @param: @return * @return: String * @author: liu yunsheng * @date: 14 เมษายน 2017 เวลา 10:17:35 am * @throws * / สตริงส่วนตัว SimpledateFormat ("yyyymmddhhmmsssssss"); ส่งคืน fmt.format (วันที่ใหม่ ()); } / ** * * @title: อัปโหลด * @description: todo * @param: @param ไฟล์ * @param: @param destdir * @param: @param Request * @param: @throws Exception * @return: void * @author: liu yunsheng * @date: 14 เมษายน อัปโหลด (MultipArtFile [] ไฟล์, สตริง destDir, httpservletRequest คำขอ) โยนข้อยกเว้น {path String = request.getContextPath (); String basepath = request.getScheme ()+": //"+request.getServerName ()+":"+request.getServerport ()+path; ลอง {filenames = สตริงใหม่ [files.length]; ดัชนี int = 0; สำหรับ (multipartfile ไฟล์: ไฟล์) {string suffix = file.getoriginalfilename (). substring (file.getoriginalfilename (). lastindexof (".")+1); ความยาว int = getAllowsUffix (). indexof (คำต่อท้าย); ถ้า (length == -1) {โยนข้อยกเว้นใหม่ ("โปรดอัปโหลดไฟล์ในรูปแบบที่อนุญาต"); } if (file.getSize ()> getAllowsize ()) {โยนข้อยกเว้นใหม่ ("ขนาดไฟล์ที่คุณอัปโหลดอยู่นอกช่วง"); } string realPath = request.getSession (). getServletContext (). getRealPath ("/"); ไฟล์ destFile = ไฟล์ใหม่ (RealPath+DestDir); if (! destfile.exists ()) {destfile.mkdir (); } สตริง filenamenew = getFilenamenew ()+"."+คำต่อท้าย; // ไฟล์ f = ไฟล์ใหม่ (destFile.getAbsoluteFile ()+"//"+filenamenew); file.transferto (f); f.createnewfile (); ชื่อไฟล์ [ดัชนี ++] = basepath+destdir+filenamenew; }} catch (Exception e) {โยน e; }} / ** * * @title: อัปโหลด * @description: todo * @param: @param ไฟล์ * @param: @param destdir * @param: @param Request * @param: @throws Exception * @return: void * @author: liu yunsheng * @date ไฟล์, สตริง destDir, httpservletRequest คำขอ) พ่นข้อยกเว้น {สตริงพา ธ = request.getContextPath (); // http: // localhost: 8088/Huahang String basepath = request.getScheme ()+": //"+request.getServerName ()+":"+request.getServerport ()+เส้นทาง; ลอง {string suffix = file.getoriginalfilename (). substring (file.getoriginalfilename (). lastIndexof (".")+1); ความยาว int = getAllowsUffix (). indexof (คำต่อท้าย); ถ้า (length == -1) {โยนข้อยกเว้นใหม่ ("โปรดอัปโหลดไฟล์ในรูปแบบที่อนุญาต"); } if (file.getSize ()> getAllowsize ()) {โยนข้อยกเว้นใหม่ ("ขนาดไฟล์ที่คุณอัปโหลดเกินช่วง"); } string realPath = request.getSession (). getServletContext (). getRealPath ("/")+"/"; ไฟล์ destFile = ไฟล์ใหม่ (RealPath+DestDir); if (! destfile.exists ()) {destfile.mkdirs (); } สตริง filenamenew = getFilenamenew ()+"."+คำต่อท้าย; ไฟล์ f = ไฟล์ใหม่ (destfile.getabsolutefile ()+"/"+filenamenew); file.transferto (f); f.createnewfile (); // รวมเส้นทางเต็มของเว็บไซต์ http: // localhost: 8080/qdlimap/upload/user/20170414104142667.png // filename = basepath+destdir+filenamenew; // ส่งคืนเส้นทางการอัปโหลด/ผู้ใช้/20170414104142667.png filename = destDir+filenameNew; } catch (exception e) {โยน e; -สรุป
ข้างต้นคือ webploader ที่ฉันแนะนำให้คุณรู้จัก ฟังก์ชั่นการอัปโหลดแบทช์รูปภาพมาพร้อมกับรหัสตัวอย่าง ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!