เมื่อเร็ว ๆ นี้ฉันกำลังเขียนเว็บไซต์ส่วนตัวของฉันเองกรอบ Bootstrap ที่ใช้ในส่วนหน้า เมื่อฉันได้รับฟังก์ชั่นการอัปโหลดของรูปภาพฉันพบปลั๊กอินอัพโหลดรูปภาพที่ใช้ bootstrap-based image framework บนอินเทอร์เน็ต ปลั๊กอินนี้สอดคล้องกับมุมมองความงามของฉันมากดังนั้นฉันจะบันทึกการใช้ปลั๊กอินนี้สั้น ๆ
ก่อนอื่นแนะนำไฟล์ปลั๊กอิน CSS และ JS ตามเส้นทางโครงการของคุณ
โปรดทราบว่าไฟล์ภาษาในตำแหน่งจะถูกนำมาใช้หลังจากไฟล์ fileInput.min.js
<!-อินพุตไฟล์-> <link href = "../../ css/fileinput.min.css" rel = "stylesheet"> <script src = "../../ js/fileinput.min.js"> </script>
จากนั้นก็มีรหัส HTML เพราะฉันไม่ได้เป็นมืออาชีพส่วนหน้าดังนั้นรหัสส่วนหน้านั้นแย่มากและพ่นเบา ๆ และตี
<!-Modal Box (modal)-> <span style = "space สีขาว: pre"> </span> <div id = "mymodal" tabindex = "-1" role = "กล่องโต้ตอบ" Aria-labelledby = "MyModallabel" aria-hidden = "true"> < <span style = "space สีขาว: pre"> </span> <div> <span style = "space สีขาว: pre"> </span> <div> <span style = "space white-space: pre"> </span> <div> <span style = "space สีขาว: pre"> </span> </span> × <span style = "space สีขาว: pre"> </span> </button> <span style = "space space: pre"> </span> <h3 id = "mymodallabel" allign = "center"> <span style = "space สีขาว: pre"> </span> <b> style = "space สีขาว: pre"> </span> </div> <span style = "space สีขาว: pre"> </span> <div> <span style = "space white-space: pre"> </span> <form id = "addform" role = "form" enctype = "multipart/form-data </span> <span> ชื่อคะแนน </span> <span style = "space สีขาว: pre"> </span> <span style = "space สีขาว: pre"> </span> <อินพุต type = "text" id = "scorename" name = "scorename" platholder = ""> Style = "Display: Inline-Table; Margin-Top: 10px;"> <span style = "White-space: pre"> </span> <span style = "space สีขาว: pre"> </span> <span> ประเภทคะแนน </span> <span style = "space สีขาว: pre"> </span> < style = "space สีขาว: pre"> </span> <span style = "pre-space: pre"> </span> <span style = "space สีขาว: pre"> </span> </div> <span style = "Space-space: pre"> </span> <span style = "space สีขาว: ระยะขอบด้านบน: 10px; ระยะขอบซ้าย: 90px; "> <span style =" พื้นที่สีขาว: pre "> </span> <span style =" space สีขาว: pre "> </span> <span style =" space สีขาว: pre "> </span> <span style =" space สีขาว: style = "space สีขาว: pre"> </span> <span style = "pre-space: pre"> </span> </div> <span style = "space สีขาว: pre"> </span> <div style = "margin-top: 10px;"> <span style = "pre-space: pre-space: </span> <span style = "space สีขาว: pre"> </span> <span style = "space สีขาว: pre"> </span> <อินพุต type = "text" id = "tune" name = "tune"> <span style = "Span> </span> </span> </div> </div> id = "fileup" type = "file"/> <span style = "space สีขาว: pre"> </span> </div> <span style = "space สีขาว: pre"> </span> </form> <span style = "Span) pre = </span> </div> <span style = "space สีขาว: pre"> </span> <button type = "ปุ่ม" data-dismiss = "modal"> close <span style = "space white-space: pre"> </span> </douse> <span style = "Span> </span> </span> <span style = "พื้นที่สีขาว: pre"> </span> </div> <!-/.modal-content-> <span style = "space white-space: pre"> </span> </div> <!-/.modal-> <span style = "pre-space: pre">
จากนั้นรหัส JS จะเริ่มต้นไฟล์อินพุตไฟล์
// เริ่มต้นฟังก์ชั่นการควบคุม fileInput (การเริ่มต้นครั้งแรก) initFileInput (ctrlName, uploadurl) {var control = $ ('#' + ctrlName); control.FileInput ({ภาษา: 'zh', // ตั้งค่าภาษาอัพเดต: uploadurl, // ที่อยู่ที่อัปโหลดที่ได้รับอนุญาต fileextensions: ['jpg', 'png', 'gif'], // ได้รับไฟล์คำต่อท้าย // รูปแบบปุ่ม previewFileicon: "<i class = 'glyphicon glyphicon-king'> </i>", uploadaSync: false, uploadextradata: ฟังก์ชั่น (previewid, {var obj = {}; $ (นี้) .val (); } // เริ่มต้น FileInput InitFileInput ("fileUp", http: // localhost: 8080/web/guita/addguitainfo.action);รหัสนี้เป็นแกนหลักของปลั๊กอิน
Uploadurl เป็นเส้นทางการเข้าถึงที่กำหนดโดยพื้นหลัง
นี่คือย่อหน้าพิเศษที่นี่
Uploadextradata: ฟังก์ชั่น (previewId, ดัชนี) {var obj = {}; $ ('#addform') ค้นหา ('อินพุต') แต่ละ (ฟังก์ชั่น () {var id = $ (this) .attr ('id'), val = $ (this) .val (); obj [id] = val;}); คืน OBJ; -รหัสนี้ Uploadextradata เหมาะสำหรับการผ่านพารามิเตอร์เพิ่มเติมที่สามารถใช้ในการส่งแบบฟอร์มแบบฟอร์มสำหรับข้อมูลกล่องอินพุตอื่น ๆ
uploadextradata: {type: "type", tune: "tune"}โดยทั่วไปข้อมูลคงที่สามารถรับได้โดยตรงดังแสดงในรูปด้านบน อย่างไรก็ตามหากคุณเขียนแบบนี้คุณจะไม่ได้รับข้อมูลแบบไดนามิก ข้อมูลจะถูกสร้างขึ้นเพียงครั้งเดียวในระหว่างการเริ่มต้นและจะไม่เปลี่ยนแปลง
ฉันสับสนเกี่ยวกับปัญหานี้มานานแล้ว ในที่สุดฉันอ่านการอภิปรายของเพื่อนต่างชาติเกี่ยวกับ Git แล้วอ้างถึง API เพื่อแก้ไขปัญหา
หลังจากเขียนสิ่งเหล่านี้คุณจะเห็นการเรนเดอร์
สไตล์ยังคงดีมาก คลิกเพื่ออัปโหลดและข้อมูลทั้งหมดจากจะถูกส่งไปยังพื้นหลัง
แอปพลิเคชั่นปลั๊กอินจำนวนมากที่ฉันพบทางออนไลน์นั้นรวมเข้ากับ PHP ฉันเขียนมันใน Java ที่นี่ฉันไปที่รหัสที่ได้รับในพื้นหลัง Framework SpringMVC สะดวกมากในการรับข้อมูล
ด้วยวิธีนี้พารามิเตอร์ข้อมูลและพารามิเตอร์ภาพจะถูกส่งผ่านและการเรียกพื้นหลังรหัสที่อัปโหลดโดยไฟล์เพื่อบันทึกภาพ
มีการใช้งานมากมายที่ควรค่าแก่การศึกษาสำหรับปลั๊กอินนี้ ที่นี่ฉันเพิ่งพูดคุยสั้น ๆ เกี่ยวกับวิธีการใช้งานและกรอกข้อมูลไดนามิก เพื่อนที่เพิ่งติดต่อกับปลั๊กอินนี้สามารถทำการอ้างอิงสั้น ๆ
ฉันได้แนะนำวิธีการอัปโหลดรูปภาพของ Bootstrap มากมายโดยใช้ปลั๊กอินไฟล์อินพุต ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!