หากคุณไม่ทราบการกำหนดค่าของ bootstrap-fileinput คุณสามารถตรวจสอบเว็บไซต์อย่างเป็นทางการ: http://plugins.krajee.com/file-input
คำอธิบายเชิงตรรกะ: ก่อนอื่นให้รับข้อมูลจากพื้นหลังแล้วแก้ไข
โดยไม่ต้องกังวลใจเพิ่มเติมเพียงอัปโหลดรหัส
1. ส่วนหนึ่งของรหัสหน้า:
<div> <label for = "inputemail3"> โลโก้โครงการ </label> <div> <อินพุต id = "testlogo" type = "file" name = "iCofile"/> <อินพุต type = "text" name = "htestlogo" id = "htestlogo" onchange = "addfile (this)"
หมายเหตุ: ในกรณีที่ธุรกิจของฉันต้องการ onchange () และเหตุการณ์เพิ่มเติมจะถูกดำเนินการโดยอัตโนมัติหลังจากการอัปโหลดเสร็จสมบูรณ์ วิธีนี้สามารถลบออกได้
2. รับวิธีการเริ่มต้นข้อมูล:
// เริ่มต้นเพื่อรับไฟล์ต้นฉบับ $ (function () {$ .ajax ({type: "post", url: "/eim/project/testfileupload.do", ข้อมูลประเภท: "json", ความสำเร็จ: ฟังก์ชั่น (data) {layer.msg ('การดำเนินการ errorthrown) {layer.msg ('การดำเนินการล้มเหลว!');คำอธิบาย: ที่นี่ฉันส่งคืนอาร์เรย์วัตถุ: รายการ <MemberUser> ซึ่งสามารถเข้าใจได้ว่าเป็นนักเรียนทุกคนในชั้นเรียนและแสดงอวตาร
3. เริ่มต้นส่วนประกอบ bootstrap-fileinput:
ฟังก์ชั่น showphotos (djson) {// ส่งคืนสตริง JSON ไปยังวัตถุ JSON ในพื้นหลัง var redata = eval (djson); // ดูตัวอย่างภาพกลุ่มข้อมูล JSON var prelist = new Array (); สำหรับ (var i = 0; i <redata.length; i ++) {var array_element = redata [i]; // ที่นี่เราอ้างถึงคำพิพากษาสำหรับ. txt และเพิ่มส่วนที่เหลือให้กับตัวเองถ้า (array_element.fileidfile.name.indexof ("txt")> 0) {// แสดงประเภทที่ไม่ใช่ภาพ prelist [i] = "<div class = 'ไฟล์ preview- fa-file-text-o text-info '> </i> </span> </div> </div> "} else {// ประเภทรูปภาพ prelist [i] =" <img src =/"/eim/upload/getimg.do class =/"file-preview-image/"> "; }} var previewjson = prelist; // กำหนดค่าข้อมูลที่สอดคล้องกับกลุ่มข้อมูล JSON ของภาพตัวอย่างด้านบน var preconfiglist = new Array (); สำหรับ (var i = 0; i <redata.length; i ++) {var array_element = redata [i]; var tjson = {คำบรรยายภาพ: array_element.fileidfile.filename, // ความกว้างชื่อไฟล์ที่แสดง: '120px', url: '/eim/project/deletefile.do', // ลบคีย์ URL: array_element.id preconfiglist [i] = tjson; } // สอบถามพารามิเตอร์เฉพาะด้วยตัวคุณเอง fileInput ({uploadurl: '/eim/upload/uploadfile.do', uploadasync: จริง, การแสดง: จริง, showupload: จริง, // ไม่ว่าปุ่มอัปโหลดจะแสดงหรือไม่ showpreview: จริง, showcancel: จริง, dropzoneenabled: false, maxfileCount: 10, initialPreviewShowDelete: จริง, msgfilestoomany: "เลือกจำนวนไฟล์ที่อัปโหลดเกินค่าสูงสุดที่อนุญาต!" PreviewFileicOnsettings: {'docx': '<i> </i>', 'xlsx': '<i> </i>', 'pptx': '<i> </i>', 'pdf': '<i> </i> preconfiglist}). ปิด ('filepreupload') on ('filepreupload', function () {// alert (data.url);}) บน ("fileuploaded", ฟังก์ชั่น (เหตุการณ์, outdata) การกำหนดอินพุตที่สอดคล้องกัน $ ('#htestlogo'). val (ผลลัพธ์) .change ();}); -4. แบ็กเอนด์ Java บันทึกส่วนหนึ่งของรหัสไฟล์
@RequestMapping (value = "/uploadFile", method = requestMethod.post) @ResponseBody วัตถุสาธารณะอัพโหลดไฟล์ (httpservletRequest คำขอ, httpservletResponse การตอบสนอง) พ่น ercletexception, ioexception {// แปลง (MultiparthttpservletRequest) คำขอ; // รับไฟล์ลงในแผนที่คอนเทนเนอร์แผนที่ <String, MultipartFile> fileMap = MultipartRequest.getFileMap (); // รับพารามิเตอร์เส้นทางที่ส่งผ่านโดย page folderPath = request.getParameter ("โฟลเดอร์"); string rootpath = baseconfig.uploadPath; String filePath = rootPath + folderPath + "/"; // อัปโหลดไฟล์และส่งคืนคอนเทนเนอร์แผนที่แผนที่เก็บข้อมูลไฟล์ไฟล์ fileModel fileModel = uploadifyUts.uploadFiles (FilePath, fileMap); Boolean Flag = Service.add (FileModel); if (flag) {string result = fileModel.getId ()+";"+fileModel.getFilePath ()+";"+fileModel.getName ()+";" fileModel.getFilePath (); แผนที่แผนที่ = ใหม่ hashmap <> (); map.put ("id", filemodel.getId ()); // ส่งคืนไฟล์บันทึก ID //response.getWriter().write(Map); แผนที่กลับ; } return null; -หมายเหตุ: รหัสนี้ได้รับส่วนหนึ่งของข้อมูลของไฟล์ที่อัปโหลดเช่นชื่อไฟล์เส้นทางที่อัปโหลด ฯลฯ และบันทึกข้อมูลไฟล์ลงในตารางและวัตถุที่เกี่ยวข้องคือ FileModel
5. รีเฟรชส่วนประกอบหลังจากการอัปโหลดเสร็จสมบูรณ์
เอฟเฟกต์การแสดงผลสุดท้าย:
หมายเหตุ: ที่นี่เราอ้างถึงการตัดสินประเภทไฟล์ TXT สำหรับส่วนที่เหลือของ DOC และ PPT มีไอคอนการแสดงผลที่สอดคล้องกัน คุณจะต้องเพิ่มสไตล์ที่สอดคล้องกันเมื่อพิจารณาว่าจะตัดสินหรือไม่
สิ่งที่แนบมา: ตามเส้นทางที่ผ่านมา/ดาวน์โหลดรหัสไฟล์:
/** * ดาวน์โหลดไฟล์ * * @param savepath * บันทึกไดเรกทอรี * @param ชื่อ * ไฟล์ต้นฉบับ * ชื่อเมื่อบันทึกมีคำต่อท้าย * @param Request * @param Response * @return */สตริงคงที่สาธารณะลง (สตริงบันทึกสตริงสตริง ไฟล์ไฟล์ = ไฟล์ใหม่ (พา ธ ); if (! file.exists ()) {// request.setAttribute ("ชื่อ", ชื่อไฟล์); return "download_error"; // return ไฟล์ดาวน์โหลดไม่มีอยู่} response.setContentType ("แอปพลิเคชัน/octet-stream"); // ตั้งค่าสตริงส่วนหัวของการตอบกลับ useragent = request.getheader ("user-agent"). toLowerCase (); if (useragent.indexof ("msie")! = -1) {// ie browser // system.out.println ("IE เบราว์เซอร์"); Response.addheader ("เนื้อหา-การจัดสรร", "เอกสารแนบ; filename =" + urlencoder.encode (ชื่อ, "UTF-8")); } else {response.addheader ("เนื้อหา-การจัดสรร", "เอกสารแนบ; filename =" + สตริงใหม่ (name.getBytes ("UTF-8"), "iso8859-1")); } response.addheader ("ความยาวเนื้อหา", "" + file.length ()); // ดาวน์โหลดไฟล์ในรูปแบบของสตรีม inputstream fis = ใหม่ bufferedInputStream (ใหม่ FileInputStream (พา ธ )); ไบต์ [] บัฟเฟอร์ = ไบต์ใหม่ [fis.available ()]; fis.read (บัฟเฟอร์); fis.close (); //response.setContentType("Image/* "); // ตั้งค่าส่งคืนประเภทไฟล์ outputStream toClient = response.getOutputStream (); OutputStream BOS = ใหม่ bufferedOutputStream (toclient); // bufferedWriter bw = bufferedWriter ใหม่ (New OutputStreamWriter (BOS)); bos.write (บัฟเฟอร์); //bw.close (); bos.close (); toClient.close (); คืนค่า null; } catch (exception e) {e.printstacktrace (); //response.reset (); return "Exception"; // กลับไปที่หน้ายกเว้น} ในที่สุด {/* ถ้า (toclient! = null) {ลอง {toClient.close (); } catch (ioexception e) {e.printstacktrace (); -ที่แนบมา:
Uploadifyutils.uploadfiles เป็นส่วนหนึ่งของรหัส
public Static filemodel uploadfiles (String savepath, Map <String, MultipartFile> FileMap) {// อัปโหลดไฟล์ // ไฟล์แนบโมเดลวัตถุ FileModel FM = ใหม่ fileModel (); ลอง {file file = ไฟล์ใหม่ (บันทึก); // ตรวจสอบว่ามีโฟลเดอร์อยู่หรือไม่และหากไม่มีอยู่ให้สร้างโฟลเดอร์ makedir (ไฟล์); if (fileMap! = null) {สำหรับ (map.entry <string, multipartFile> เอนทิตี: fileMap.entrySet ()) {multipartFile f = entity.getValue (); if (f! = null &&! f.isEmpty ()) {string uuid = uploadifyutils.getuuid (); // uuid เป็นชื่อไฟล์เมื่อบันทึกสตริง ext = uploadifyeTils.getFileExt (f.getoriginalfilename (); f.transferto (newfile); fm.setfilename (f.getoriginalfilename ()); fm.setName (uuid+"."+ext); FM.SetFilePath (SavePath); // บันทึก PATH FM.SETEXT (EXT); fm.setsize (f.getsize ()); }} ส่งคืน fm; } catch (exception e) {log.error (e); คืนค่า null; -ด้านบนคือการอัปโหลดและแก้ไข FileInput ใน Bootstrap แนะนำให้คุณรู้จักโดยตัวแก้ไข ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!