*1. bootstrap-fileinput plug-in git download address
https://github.com/kartik-v/bootstrap-fileinput.git
2. แก้ปัญหาการใช้ bootstrap-fileinput เพื่อรับค่าคืน
อัปโหลดรูปภาพ
$ ("#file-0a"). fileInput ({uploadurl: "/upload_img", // อัปโหลด urlallowedfileextensions สำหรับการอัพโหลดรูปภาพ: ['jpg', 'png', 'gif'] จำนวนสูงสุดของไฟล์เริ่มต้น: "โปรดอัปโหลดโลโก้ผู้ค้า", // ค่ากล่องข้อความเริ่มต้น // ที่อนุญาตให้ใช้งาน: ['รูปภาพ', 'วิดีโอ', 'flash'], slugcallback: ฟังก์ชัน (ชื่อไฟล์) {return filename.replace ('(', '_')โปรดทราบว่าหลังจากอัปโหลดเหตุการณ์ภาพให้รับวิธีการเขียนค่าส่งคืน
$ ('#file-0a'). on ('fileuploaded', ฟังก์ชั่น (เหตุการณ์, ข้อมูล, previewid, ดัชนี) {var form = data.form, files = data.files, extra = data.extra, response = data.response, reader = data.reader; console.log (ตอบกลับ)หน้า JSP
<input id = "file-0a" type = "file" multipledata-min-file-count = "1" name = "upload_logo">
โดยที่ data-min-file-count =” 1” หมายถึงจำนวนไฟล์ขั้นต่ำที่อัปโหลด
3. รหัสเซิร์ฟเวอร์
ใช้ปลั๊กอินของสปริงเพื่ออัปโหลดเฟรมเวิร์กคือ SpringMVC
ถั่ว
นำเข้า java.util.list; รูปภาพคลาสสาธารณะ {รายการส่วนตัว <String> พา ธ ; รายการสาธารณะ <String> getPaths () {เส้นทางกลับ;} โมฆะสาธารณะ setPaths (รายการ <String> เส้นทาง) {this.Paths = paths;}}}}}ผู้ควบคุม
@responsebody@requestmapping (value = "upload_img", method = requestmethod.post) ภาพสาธารณะ uploadimage (@requestparam multipartfile [] upload_logo) โยน ioexception {log.info ("อัปโหลดรูปภาพ"); รูปภาพรูปภาพ = ภาพใหม่ uploadutil.getFolder (); สำหรับ (MultipartFile myFile: upload_logo) {ถ้า (myfile.isempty ()) {log.info ("ไฟล์ไม่อัปโหลด"); } else {log.info ("ความยาวไฟล์:" + myfile.getSize ()); log.info ("ประเภทไฟล์:" + myfile.getContentType ()); log.info ("ชื่อไฟล์:" + myfile.getName ()); log.info ("ชื่อไฟล์:" + myfile.getoriginalfilename ()); log.info ("================================================================================================================= - - - uploadutil.writefile (myfile.getoriginalfilename (), dir, myfile.getInputStream ()); log.info ("เส้นทางไฟล์:"+path); paths.add (พา ธ );updoadutil
logger สุดท้ายคงที่ logger log = loggerFactory.getLogger (uploadutil.class); private uploadutil () {} ส่วนตัวคงที่ simpledateFormat fullsdf = new SimpledateFormat ("yyyymmddhhmmssssss"); โฟลเดอร์แบบคงที่แบบคงที่ส่วนตัว = ใหม่ SimpledateFormat ("yyyy" + file.Saperator + "MM" + file.Saperator + "dd");/*** กลับไปที่ไฟล์ yyyy file.Sparator mm file.Sparator srcname* ชื่อไฟล์ต้นฉบับ* @param dirname* ชื่อไดเรกทอรี* @param อินพุต* อินพุตสตรีมที่จะบันทึก* @return ส่งคืนเส้นทางที่จะถูกบันทึกลงในฐานข้อมูล*/สตริงคงที่ public String writefile (สตริง srcname กำหนดค่าใน Server.xml String uploaddir = contextutil.getSysprop ("upload_dir"); // ตั้งค่าเส้นทางการอัปโหลด // ดึงเส้นทางการเข้าถึงของสตริงไดเรกทอรีเสมือนจริง VirtualDir = contextutil.getSySprop ("virtual_dir"); {srcname = srcname.substring (srcname.indexof ("."));} else {srcname = ".jpg";} string filename = ""; // รับเส้นทางไฟล์เพื่ออัปโหลดชื่อไฟล์ srcname; // รับพา ธ ที่จะถูกบันทึกลงในสตริงข้อมูล savepath = filename.replace (uploaddir, ""); savepath = virtualdir + savepath.replace ("//", "/") ไฟล์ไฟล์ = ไฟล์ใหม่ fos = ใหม่ fileOutputStream (ไฟล์); // หนึ่งครั้ง 30kbbyte [] readbuff = ไบต์ใหม่ [1024 * 30]; int count = -1; ในขณะที่ ((count = input.read (readbuff, 0, readbuff.length))! = -1) {fos.write (readbuff, 0) savepath;}4. แก้ปัญหาบางอย่างที่พบในระหว่างการอัปโหลด
หากคุณพบคลิกเพื่ออัปโหลดแถบความคืบหน้าจะแสดงเป็น 100%และหน้า JSP แสดง [Object, OBEJCT] จากนั้นให้ความสนใจว่าวัตถุ JSON ที่ส่งคืนคุณอยู่ในพื้นหลังหรือไม่
ด้านบนเป็นวิธีการปลั๊กอิน FileInput ของ Bootstrap เพื่อใช้การอัปโหลดหลายไฟล์ที่ตัวแก้ไขได้แนะนำให้คุณรู้จัก ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!