เมื่อเร็ว ๆ นี้ฉันต้องอัปโหลดไฟล์ไฟล์ในโครงการ ฉันเคยส่งตามแบบฟอร์มมาก่อนเสมอ ฉันลอง Ajaxform และรู้สึกว่ามันค่อนข้างมีประโยชน์ ฉันเขียนเครื่องหมายเรียงความสำหรับการใช้งานในอนาคต
การตระเตรียม:
ดาวน์โหลด jQuery-form.js
ขวดที่เกี่ยวข้อง:
Commons-Fileupload -1.1.1.jar
Commons-io-1.3.2.jar
กำหนดค่า multipartresolver ใน spring-servlet.xml:
<bean id = "multipartresolver"> <property name = "defaultEncoding" value = "utf-8" /> <property name = "maxuploadsize" value = "10485760000" /> <property name = "MaxinMemorySize" value = "40960" />
นี่เป็นสิ่งที่ต้องทำมิฉะนั้นจะไม่ทำงาน
หน้าหนังสือ:
<! doctype html public "-// w3c // dtd html 4.01 transitional // en" "http://www.w3.org/tr/html4/loose.dtd"><%@ page language =" Java "contenttype =" ข้อความ/html; session = "false" %> <html> <!---ผู้แต่ง: xieshuang- วันที่: 2016-06-20 13: 46: 20- คำอธิบาย:-> <head> <title> ชื่อเรื่อง </title> <meta http-equiv = "content-type" content-type src = "<%= request.getContextPath ()%>/common/nui/nui.js" type = "text/javascript"> </script> <script src = "<%= request.getContextPath ()%>/common/nui/jQuery/jQuery-form.js src = "<%= request.getContextPath ()%>/page4nui/master/projectType/js/projectType_import.js"> </script> <script type = "text/javascript"> var contextpath = "<%= request.getContextPath () style = "padding-top: 5px; min-width: 300px; min-height: 180px;"> <form id = "fileupload" method = "post" enctype = "multipart/form-data"> <div id = "dataimport"> <table> <tr> name = "file"> <font style = "สี: สีแดง; ความกว้าง: 5%;"> *</font> </td> </tr> </table> </div> </div> <div div = "center"> <อินพุต iconcls = "icon-ok"; iconcls = "icon-cancel" onclick = "cancel"> ยกเลิก </a> </div> </form> </div> </body> </html>
Core JS:
var msg; $ (function () {nui.parse (); // ajax การกำหนดค่าตัวเลือก var = {url: contextpath+"/webapp/cfprojecttype/importExcel", beforesubmit: showrequest, // ความสำเร็จในปัจจุบัน: showresponse, // การประมวลผล $ ('#fileupload') ส่ง (function () {// note $ (this) .ajaxsubmit (ตัวเลือก); return false; // ป้องกันกล่องโต้ตอบจากการปิดโดยอัตโนมัติ});}) // เรียกใช้ฟังก์ชั่นฟังก์ชั่นการโทรกลับที่ประสบความสำเร็จ if (e.importFlag == true) {closeWindow ("ตกลง"); } else {// การจัดการข้อผิดพลาด}} // การตรวจสอบบางอย่างก่อนฟังก์ชั่นการส่ง showrequest (formData, jqform, ตัวเลือก) {ถ้า (formData [0] .Value == "" || formData [0] .Value == null) {nui.alert กลับเท็จ; } var filename = $ ("#uploadfile"). val (). split ("//"). pop (); var strs = new Array (); // กำหนดอาร์เรย์ strs = filename.split ('.'); var suffix = strs [strs .length - 1]; ถ้า (ต่อท้าย! = 'xls' && คำต่อท้าย! = 'xlsx') {nui.alert ("โปรดเลือกไฟล์ excel!"); กลับเท็จ; } msg = nui.loading ("โหลด", "โปรดรอ");}รหัส Java:
@suppresswarnings ("ไม่ได้ตรวจสอบ")@requestmapping ("/webapp/cfprojecttype/importexcel")@responsebodypublic map <String, Object> importExcel (@requestparam ("ไฟล์") ไฟล์ multipartFile [] อินพุตสตรีม FIS; FIS = NULL; ไฟล์ filein = null; ลอง {สำหรับ (multipartFile myFile: ไฟล์) {ถ้า (! myFile.isEmpty ()) {String realPath = request.getSession (). getServletContext (). getRealPath ("/export"); filein = ไฟล์ใหม่ (RealPath); // ตัดสินว่าไดเรกทอรีที่มีไฟล์ที่อัปโหลดอยู่หรือไม่ถ้า (! filein.exists () &&! filein.isdirectory ()) {// สร้างไดเรกทอรี filein.mkdirs (พา ธ ); } // คัดลอกไฟล์ที่อัปโหลดไปยังโฟลเดอร์ myfile.transferto (ไฟล์ใหม่ (พา ธ+ชื่อไฟล์)); -ที่นี่ฉันได้ใช้วิธีการอื่น fileutils.copyInputStreamTofile (inputStream arg0, ไฟล์ arg1) ก่อนซึ่งสามารถบันทึกไฟล์ไปยังพา ธ ได้
สำหรับเนื้อหาที่น่าตื่นเต้นยิ่งขึ้นโปรดดูหัวข้อพิเศษ "AJAX UPLOAD TECHYREC SUMICMARY", "JavaScript File Upload Summary Operation Summary" และ "JQuery Upload Summary Operation Summary" สำหรับการเรียนรู้
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น