ฉันได้รับการไว้ชีวิตเมื่อเร็ว ๆ นี้ ฉันได้สรุปการใช้งานทั่วไปของส่วนประกอบ bootstrap fileInput ฉันจะแบ่งปันกับแพลตฟอร์มเครือข่าย Wulin สำหรับการอ้างอิงของคุณและมันก็สะดวกสำหรับการค้นหาในอนาคต โปรดยกโทษให้ฉันสำหรับการเขียนบทความนี้ไม่ดี
1. ผลการแสดงผล
1. ประเภทอินพุตดั้งเดิม = 'ไฟล์' นั้นทนไม่ได้ที่จะดู
2. bootstrap fileInput โดยไม่มีการตกแต่งใด ๆ : (วิวัฒนาการหลักของ bootstrap fileInput)
3. วิวัฒนาการขั้นสูงของ Bootstrap FileInput: วัฒนธรรมจีน, การอัปโหลดการลากและวาง, การตรวจสอบส่วนขยายไฟล์ (หากไม่จำเป็นต้องอัปโหลดไฟล์)
ลากและวางอัปโหลด
การอัพโหลด
4. Bootstrap FileInput Ultimate Evolution: อนุญาตให้อัปโหลดไฟล์หลายไฟล์ในเวลาเดียวกันโดยหลายเธรด
การอัพโหลด
หลังจากการอัปโหลดเสร็จสมบูรณ์
2. ตัวอย่างรหัส
แล้วล่ะ? มีประสิทธิภาพแค่ไหน? ไม่ต้องกังวลเราจะบรรลุผลลัพธ์ข้างต้นทีละขั้นตอน
1. หน้า cshtml
ก่อนอื่นแนะนำไฟล์ JS และ CSS ที่ต้องการ
// bootstrap fileinputbundles.add (ScriptBundle ใหม่ ("~/เนื้อหา/bootstrap-fileinput/js") รวม ("~/เนื้อหา/bootstrap-fileinput/js/fileinput.min.js", "~/content/bootstrap-fileinput/JS/JS Stylebundle ("~/content/bootstrap-fileinput/css") รวมถึง ("~/content/bootstrap-fileinput/css/fileinput.min.css"));@scripts.render ("~/content/bootstrap-fileinput/js")@styles.renderจากนั้นกำหนดแท็กอินพุต type = 'ไฟล์'
<form> <div id = "mymodal" tabindex = "-1" role = "กล่องโต้ตอบ" aria-labelledby = "mymodallabel"> <div role = "document"> <div> <div> <button type = "button" data-dismiss = "modal" Aria-Label = "close" id = "mymodallabel"> โปรดเลือกไฟล์ excel </h4> </div> <div> <a href = "~/data/exceltemplate/order.xlsx" style = "border: none;"> ดาวน์โหลดแม่แบบนำเข้า </a>
มุ่งเน้นไปที่ประโยคนี้:
<อินพุต type = "file" name = "txt_file" id = "txt_file" หลายตัว />>>>
หลายหมายความว่ามีหลายไฟล์ที่ได้รับอนุญาตให้อัปโหลดในเวลาเดียวกันและ class = "การโหลดไฟล์" หมายถึงรูปแบบของแท็ก
2. การเริ่มต้น JS
$ (function () {// 0. เริ่มต้น FileInputVar ofileInput = new FileInput (); OfileInput.init ("txt_file", "/api/orderapi/importorter");}); Uploadurl) {var control = $ ('#' + ctrlName); // เริ่มต้นรูปแบบของการควบคุมการอัปโหลด fileinput ({ภาษา: 'zh', // ตั้งค่าภาษาอัพโหลด: uploadurl, // updoad address fileleextens: ['jpg', 'gif' Showcaption: False, // ทำเบราว์เซอร์ชื่อเรื่อง: "btn btn-primary", // รูปแบบปุ่ม // dropzoneenabled: false, // พื้นที่ลาก // minimagewidth: 50, // minimagewidth ของภาพ // minimageHeight: 50, // ความสูงสูงสุด รูปภาพ // maximageHeight: 1000, // ความสูงสูงสุดของรูปภาพ // maxfilesize: 0, // หน่วยคือ kb จริง, previewFileicon: "<i class = 'glyphicon glyphicon-king'> </i>", msgfilestoomany: "เลือกจำนวนไฟล์ที่อัปโหลด ({n}) เกินค่าสูงสุดที่อนุญาต {m}!",}); PreviewId, INDEX) {$ ("#mymodal"). modal ("ซ่อน"); var data = data.response.lstorderImport; ถ้า (data == undefined) {toast.error ('ประเภทรูปแบบไฟล์ไม่ถูกต้อง'); return;} // 1 tableInit (); otable.init (data); $ ("#div_startimport"). show ();});} return ofile;};ภาพประกอบ:
(1) เมธอด FileInput () ถูกส่งผ่านในข้อมูล JSON ซึ่งมีคุณลักษณะมากมาย แต่ละแอตทริบิวต์แสดงถึงคุณสมบัติเมื่อเริ่มต้นการควบคุมการอัปโหลด หากไม่มีการตั้งค่าแอตทริบิวต์เหล่านี้หมายความว่าใช้การตั้งค่าเริ่มต้น หากคุณต้องการดูว่าคุณสมบัติใดอยู่ข้างในคุณสามารถเปิดซอร์สโค้ดของ FileInput.js ดังที่แสดงในตอนท้าย:
หากคุณสมบัติเหล่านี้ไม่ได้ตั้งค่าโดยเฉพาะค่าเริ่มต้นจะถูกใช้
(2) $ ("#txt_file") บน ("fileuploaded", ฟังก์ชั่น (เหตุการณ์, ข้อมูล, previewid, ดัชนี) {} วิธีนี้ลงทะเบียนเหตุการณ์การโทรกลับหลังจากอัปโหลดนั่นคือหลังจากประมวลผลไฟล์ที่อัปโหลดในวันหลังจากวันหลังจากการประมวลผล
3. วิธีการที่สอดคล้องกับพื้นหลัง C#
คุณจำได้ไหมว่ามี URL พารามิเตอร์ในวิธีการควบคุมการเริ่มต้น FileInput () ใน JS? ค่าที่สอดคล้องกันของ URL นี้ระบุวิธีการประมวลผลที่สอดคล้องกันของ C# หลังจากวัน หรือโพสต์วิธีการประมวลผลพื้นหลัง
[actionName ("importOrder")] public object importOrder () {var ofile = httpContext.current.request.files ["txt_file"]; var lstorterimport = รายการใหม่ <dto_to_order_import> (); x.order_no) .tolist (); var lsttmmodel = modelmanager.find (); var lsttmmaterial = materialsManager.find (); // var imax_import_index = lstexistorder.max (x => x.import_index); 0: IMAX_IMPORT_INDEX.VALUE;#EndRegion#ภูมิภาค 1 รับวัตถุเวิร์กบุ๊กผ่านสตรีม iWorkbook Workbook = null; ถ้า (ofile.filename.endswith (". xls")) {workbook = new hssfworkbook (Ofile.InputStream); XSSFWORKBOOK (OFILE.InputStream);} if (workbook == null) {return ใหม่ {};} // ............ จัดการตรรกะ Excel //orderManager.add(lstorter);เนื่องจากโครงการของบล็อกเกอร์คือการอัปโหลด Excel จึงใช้ตรรกะ NPOI ที่นี่ หากคุณอัปโหลดรูปภาพและไฟล์อื่น ๆ คุณสามารถใช้ GDI เพื่อประมวลผลรูปภาพ
4. อัปโหลดหลายไฟล์ในเวลาเดียวกัน
เมื่ออัปโหลดหลายไฟล์ในเวลาเดียวกันแผนกต้อนรับจะส่งคำขอแบบอะซิงโครนัสหลายรายการไปยังพื้นหลัง กล่าวคือเมื่ออัปโหลดไฟล์สามไฟล์ในเวลาเดียวกันวิธีการนำเข้าในพื้นหลังจะป้อนสามครั้ง สิ่งนี้ช่วยให้คุณสามารถประมวลผลไฟล์สามไฟล์ในเวลาเดียวกันโดยใช้หลายเธรด
3. สรุป
การใช้งานพื้นฐานของ bootstrap fileInput นั้นได้รับการแนะนำอย่างคร่าวๆ ในความเป็นจริงมันเป็นองค์ประกอบที่อัปโหลดและไม่มีการใช้งานขั้นสูง กุญแจสำคัญคือการทำให้อินเทอร์เฟซเป็นมิตรมากขึ้นและเพิ่มประสบการณ์ผู้ใช้ให้ดีขึ้น
ฉันจะแนะนำคุณมากมายเกี่ยวกับการใช้งานส่วนประกอบการอัปโหลดไฟล์ Bootstrap FileInput ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ!