การอัปโหลดไฟล์ปลั๊กอินไฟล์ Bootstrap อัปโหลดไฟล์ปลั๊กอินเป็นตัวควบคุมการอัปโหลดไฟล์ที่ดี แต่มีไม่กี่กรณีในการค้นหาและการใช้งาน เมื่อใช้มันคุณจะข้ามแม่น้ำด้วยการสัมผัสหินทีละขั้นตอน การควบคุมนี้นำเสนอในอินเทอร์เฟซและการอัปโหลดที่ฉันเคยใช้มาก่อนนั้นสวยงามกว่าและมีฟังก์ชั่นที่ทรงพลังกว่า บทความนี้ส่วนใหญ่ขึ้นอยู่กับเคสรหัสเฟรมเวิร์กของฉันเองโดยแนะนำการใช้อินพุตไฟล์ปลั๊กอินอัปโหลดไฟล์
1. บทนำเกี่ยวกับการป้อนข้อมูลไฟล์สำหรับปลั๊กอินอัปโหลดไฟล์
ที่อยู่หน้าแรกของปลั๊กอินนี้คือ: http://plugins.krajee.com/file-input คุณสามารถดูการแสดงรหัสตัวอย่างจำนวนมากจากที่นี่: http://plugins.krajee.com/file-basic-usage-demo
นี่คือการควบคุมอินพุตไฟล์ HTML5 ที่ได้รับการปรับปรุงส่วนขยายของ Bootstrap 3.x การใช้งานตัวอย่างอัปโหลดไฟล์การอัปโหลดแบบหลายไฟล์และฟังก์ชั่นอื่น ๆ
โดยทั่วไปเราจำเป็นต้องแนะนำสองไฟล์ต่อไปนี้สำหรับปลั๊กอินที่จะใช้ตามปกติ:
bootstrap-fileinput/css/fileinput.min.css
bootstrap-fileinput/js/fileinput.min.js
เอฟเฟกต์อินเตอร์เฟสอย่างง่ายมีดังนี้ เช่นเดียวกับการควบคุมไฟล์อัพโหลดจำนวนมากสามารถยอมรับไฟล์ประเภทต่าง ๆ ได้ แน่นอนเรายังสามารถระบุประเภทไฟล์เฉพาะและฟังก์ชั่นอื่น ๆ ที่ได้รับการยอมรับ
หากจำเป็นต้องพิจารณาวัฒนธรรมจีนแล้วเอกสารจะต้องมีการแนะนำ:
bootstrap-fileinput/js/fileinput_locale_zh.js
ด้วยวิธีนี้จากคอลเลกชัน Bundles ของ MVC เราสามารถเพิ่มไฟล์ที่ต้องการในคอลเลกชัน
// เพิ่มการสนับสนุนสำหรับการควบคุม bootstrap-fileinput css_meteronic.include ("~/content/myplugins/bootstrap-fileinput/css/fileinput.min.css"); js_meteronic.include ("~/content/myplugins/bootstrap-fileinput/js/fileinput.min.js"); js_meteronic.include ("~/content/myplugins/bootstrap-fileinput/js/fileinput_locale_zh.js"); js_meteronic.include ("~/content/myplugins/bootstrap-fileinput/js/fileinput_locale_zh.js");ด้วยวิธีนี้เราสามารถนำเสนอคำอธิบายอินเตอร์เฟสภาษาจีนและแจ้งให้ทราบบนหน้าดังแสดงในอินเทอร์เฟซต่อไปนี้
2. การใช้ไฟล์อินพุตสำหรับการอัปโหลดไฟล์
โดยทั่วไปแล้วเราสามารถกำหนดฟังก์ชั่น JS ทั่วไปเพื่อเริ่มต้นการควบคุมปลั๊กอินนี้ดังแสดงในรหัสฟังก์ชัน JS ต่อไปนี้
// เริ่มต้นฟังก์ชั่นการควบคุม fileInput (การเริ่มต้นครั้งแรก) initFileInput (ctrlName, uploadurl) {var control = $ ('#' + ctrlName); control.FileInput ({ภาษา: 'zh', // ตั้งค่าภาษาอัพเดต: uploadurl, // ที่อยู่ที่อัปโหลดที่อนุญาตให้ใช้งาน: ['jpg', 'png', 'gif'], // ได้รับไฟล์บาทต่อรอง // ปุ่มสไตล์ previewFileicon: "<i class = 'glyphicon glyphicon-king'> </i>",});}ในรหัสหน้าเราวางการควบคุมการอัปโหลดไฟล์ดังที่แสดงในรหัสต่อไปนี้
<div style = "ความสูง: 500px"> <input id = "file-portrait1" type = "file"> </div>
ด้วยวิธีนี้รหัสการเริ่มต้นของรหัสสคริปต์ของเรามีดังนี้:
// เริ่มต้นการควบคุม FileInput (การเริ่มต้นครั้งแรก) InitFileInput ("File-Portrait", "/ผู้ใช้/EditPortrait");สิ่งนี้ทำให้การเริ่มต้นของการควบคุมเสร็จสมบูรณ์ หากเราต้องการอัปโหลดไฟล์เราก็ต้องใช้รหัส JS เพื่อจัดการเหตุการณ์ที่อัปโหลดโดยไคลเอนต์และยังต้องมีคอนโทรลเลอร์พื้นหลัง MVC เพื่อจัดการการดำเนินการบันทึกไฟล์
ตัวอย่างเช่นรหัสของฉันสำหรับการบันทึกข้อมูลฟอร์มมีดังนี้
// เพิ่ม Record FormValidate ("ffadd", ฟังก์ชั่น (รูปแบบ) {$ ("#add"). modal ("ซ่อน"); // ส่งพารามิเตอร์โครงสร้างไปยังพื้นหลัง var postdata = $ ("#ffadd") serializearray (); $ .post (url, postdata {// เพิ่มการประมวลผล Portrait INITPORTAIT (data.data1); }}). ข้อผิดพลาด (ฟังก์ชั่น () {showtips ("คุณไม่ได้รับอนุญาตให้ใช้ฟังก์ชั่นนี้โปรดติดต่อผู้ดูแลระบบเพื่อจัดการ");});}); -ในหมู่พวกเขาเราสังเกตเห็นส่วนรหัสลอจิกการประมวลผลของการบันทึกไฟล์:
// เพิ่มการประมวลผลการอัปโหลดของภาพบุคคลเริ่มต้น (data.data1); // ใช้รหัสที่เป็นลายลักษณ์อักษรเพื่ออัปเดต $ ('#file-portrait'). fileInput ('อัปโหลด');รหัสบรรทัดแรกคือการสร้างเนื้อหาเพิ่มเติมที่อัปโหลดใหม่เช่นข้อมูล ID ของผู้ใช้เพื่อให้เราสามารถสร้างข้อมูลเพิ่มเติมบางส่วนตามรหัสเหล่านี้สำหรับการอัปโหลดและประมวลผลสำหรับพื้นหลัง
ฟังก์ชั่นนี้ส่วนใหญ่กำหนด ID เพื่ออำนวยความสะดวกในการได้มาของพารามิเตอร์เพิ่มเติมล่าสุดเมื่ออัปโหลด นี่คือโหมดการประมวลผลอัพโหลด
// เริ่มต้นฟังก์ชั่นข้อมูลภาพ initportrait (ctrlName, id) {var control = $ ('#' + ctrlName); var imageUrl = '/picturealbum/getPortrait? id =' + id + '& r =' + math.random (); // สำคัญจำเป็นต้องอัปเดตเนื้อหาพารามิเตอร์เพิ่มเติมของการควบคุมและการควบคุมการเริ่มต้นการเริ่มต้นการแสดงผลของรูปภาพ FileIlInput ('Refresh', {Uploadextradata: {id: id}, เริ่มต้น: [// การตั้งค่าภาพ-prame-image ' - -อย่างที่เราเห็นก่อนหน้านี้ที่อยู่ที่ฉันอัปโหลดคือ: "/ผู้ใช้/editportrait" ฉันจะประกาศฟังก์ชั่นพื้นหลังนี้โดยหวังว่าจะให้รหัสกรณีที่สมบูรณ์เพื่อเรียนรู้
/// <summary> /// อัปโหลดภาพผู้ใช้ Avatar image /// </summary> /// <param name = "id"> ID ของผู้ใช้ </param> /// <returs> </returns> ActionResult EditPortrait (ID int) ลอง {var files = request.files; if (ไฟล์! = null && files.count> 0) {userInfo info = bllfactory <user> .instance.findbyId (id); if (info! = null) {var filedata = readFileBytes (ไฟล์ [0]); result.success = bllfactory <user> .instance.updatePersonimageBytes (userimagetype.personportrait, id, filedata); }}} catch (Exception Ex) {result.erRorMessage = Ex.Message; } return tojsoncontent (ผลลัพธ์); -ด้วยวิธีนี้เราได้สร้างการบันทึกภาพผู้ใช้และการประมวลผลตรรกะและไฟล์สามารถบันทึกได้ตามปกติไปยังระบบไฟล์พื้นหลังและในเวลาเดียวกันข้อมูลที่จำเป็นบางอย่างจะถูกบันทึกไว้ในฐานข้อมูล
แน่นอนนอกเหนือจากการใช้มันเพื่อประมวลผลภาพผู้ใช้ภาพบุคคลแล้วเรายังสามารถใช้เพื่อสร้างการดำเนินการประมวลผลอัลบั้มภาพ อินเทอร์เฟซเฉพาะมีดังนี้
รหัสเริ่มต้นสำหรับส่วนนี้มีดังนี้:
// เริ่มต้นการควบคุม FileInput (การเริ่มต้นครั้งแรก) $ ('#file-portrait'). fileInput ({ภาษา: 'zh', // ตั้งค่าภาษาอัพเดตภาษา: "/fileupload/อัปโหลด", // ที่อยู่ที่ได้รับอนุญาต 'multipart/form-data', showupload: จริง, // การอัพโหลดปุ่มแสดง: เท็จ, // ทำเบราว์เซอร์ชื่อเรื่อง: "btn btn-primary", // รูปแบบปุ่ม previewfileicon: "<i class = 'glyphicon glyphicon-king' ({n}) เกินค่าสูงสุดที่อนุญาต {m}! ",});ข้างต้นเป็นคำอธิบายโดยละเอียดเกี่ยวกับประสบการณ์ของเฟรมเวิร์กการพัฒนาเมโทรนิเมชั่น bootstrap ที่แนะนำโดยตัวแก้ไขให้คุณ [ห้า] การใช้งานการอัพโหลดไฟล์อินพุตไฟล์ bootstrap ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน หากคุณต้องการทราบข้อมูลเพิ่มเติมโปรดให้ความสนใจกับเว็บไซต์ Wulin.com!