ในการทำงานประจำวันฟังก์ชั่นการอัปโหลดและดาวน์โหลดไฟล์เป็นส่วนที่ขาดไม่ได้ เฟรมเวิร์กสไตล์ frontstrap bootstrap ยังใช้บ่อยขึ้น ตอนนี้ขึ้นอยู่กับเทมเพลตสไตล์ที่ทรงพลังของ Bootstrap ปรับแต่งสไตล์สำหรับการดาวน์โหลดไฟล์
ในอนาคตเราจะใช้ Framework Spring MVC เพื่อใช้รหัสทั้งหมดที่อัปโหลดโดยไฟล์ดังนั้นโปรดติดตาม
มาดูตัวอย่างรูปภาพก่อน: ตัวอย่างนี้รวมถึงรูปแบบไฟล์ตัวอย่างและอัพโหลดรูปแบบไฟล์
เพียงอัปโหลดรหัสก่อนและอธิบายในที่สุด:
<div id = "ไฟล์"> <label for = ""> เลือกไฟล์: </label> <div> <อินพุต ID = "lefile" type = "file" style = "แสดง: ไม่มี"> <span onclick = "$ ('input [id = lefile]') คลิก ();" style = "เคอร์เซอร์: ตัวชี้; พื้นหลังสี: #e7e7e7"> <i> </i> เรียกดู </span> <อินพุต id = "photocover" type = "text"> <span style = "เคอร์เซอร์: ตัวชี้;เทคโนโลยีหลักที่เกี่ยวข้องคือ: bootstrap; เหตุการณ์ตัวชี้ของ CSS3; HTML5
1. รูปแบบการอัปโหลดไฟล์พื้นฐานของ HTML5
<input type = "file" name = "file">
สไตล์จะแสดงเอฟเฟกต์ที่แตกต่างกันตามเบราว์เซอร์ที่แตกต่างกัน
2. ไอคอนแบบอักษร
คุณสามารถใช้ไอคอนตัวอักษร Glyphicons ที่สร้างขึ้นใน bootstrap หรือไอคอนตัวอักษรที่ยอดเยี่ยม สำหรับบทช่วยสอนการใช้งานเฉพาะโปรดดูที่เว็บไซต์อย่างเป็นทางการ:
Glyphicons: http://v3.bootcss.com/components/#glyphicons
Font Awesome: http://fontawesome.io/
ในตัวอย่างนี้มีการใช้ไอคอนสองตัว <i> <i>
หรือ <i> <i>
3. CSS3: เหตุการณ์ตัวชี้
ใน bootstrap เหตุการณ์ตัวชี้ของ. ฟอร์แมตการควบคุมการตอบรับถูกตั้งค่าเป็นไม่มีใครซึ่งทำให้องค์ประกอบที่จะเลือกเมื่อคลิกปุ่มตัวอย่างดาวน์โหลดและตอนนี้ถูกตั้งค่าเป็นอัตโนมัติ
ไวยากรณ์:
Events Pointer: Auto | ไม่มี | VisiblePainted | Visiblefill | Visiblestroke | มองเห็นได้ ทาสี เติม | โรคหลอดเลือดสมอง ทั้งหมด
ค่าเริ่มต้น: อัตโนมัติ
ใช้ได้กับ: องค์ประกอบทั้งหมด
มรดก: ใช่
ภาพเคลื่อนไหว: ไม่
คำนวณค่า: ระบุค่า
ค่า:
อัตโนมัติ: ไม่มีการระบุประสิทธิภาพเช่นเดียวกับคุณสมบัติของ Event-Events ค่าเดียวกับที่มองเห็นได้บนเนื้อหา SVG
ไม่มี: องค์ประกอบจะไม่กลายเป็นเป้าหมายสำหรับเหตุการณ์เมาส์ อย่างไรก็ตามเมื่อคุณสมบัติของตัวชี้เหตุการณ์ขององค์ประกอบลูกหลานของมันระบุค่าอื่น ๆ เหตุการณ์เมาส์สามารถชี้ไปที่องค์ประกอบลูกหลานซึ่งในกรณีนี้เหตุการณ์เมาส์จะเรียกฟังเหตุการณ์องค์ประกอบของผู้ปกครองในการจับหรือเดือด
ค่าอื่น ๆ สามารถนำไปใช้กับ SVG เท่านั้น
4. ปุ่มเพื่ออัปโหลดไฟล์ ------- การใช้กล่องคอมโบ bootstrap
การใช้. input-Group และ .input-Group-Addon
สำหรับการแสดงผล CSS เฉพาะให้ตรวจสอบซอร์สโค้ด bootstrap ด้วยตัวเอง
5. การใช้งานปุ่มตัวอย่างดาวน์โหลด --- อ้างอิงถึงรูปแบบข้อผิดพลาดรูปแบบของ Bootstrap
การใช้. has-feedback และ. form-control-feedback
หากคุณยังไม่ได้เรียนรู้เพียงพอคุณสามารถคลิกที่นี่เพื่อเรียนรู้แล้วแนบหัวข้อที่ยอดเยี่ยมให้คุณ: การสอนการเรียนรู้ bootstrap
ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้และฉันหวังว่ามันจะเป็นประโยชน์สำหรับทุกคนในการเรียนรู้การเขียนโปรแกรม bootstrap