Bootstrap-DateTimePicker เป็นปลั๊กอินการเลือกเวลาที่มีน้ำหนักเบาซึ่งรองรับการเลือกเวลาการเป็นสากลและค่อนข้างง่ายต่อการใช้ Uploadify เป็นปลั๊กอินที่รองรับการอัปโหลดไฟล์หลายไฟล์ ฉันเพิ่งใช้ปลั๊กอินทั้งสองนี้เพื่อสร้างแอปพลิเคชั่นขนาดเล็กซึ่งรู้สึกดีดังนั้นฉันจะสรุปสั้น ๆ
1. ข้อควรระวังสำหรับการแนะนำปลั๊กอิน
ในการดาวน์โหลดเว็บไซต์อย่างเป็นทางการของ bootstrap-datetimepicker ต้องใช้ไฟล์สามไฟล์เพื่อใช้ bootstrap-datetimepicker: bootstrap-datimepicker.min.js, bootstrap-datetimepicker.min.css (สไตล์) jQuery.uploadify.min.js, uploadify.css, uploadify-cancel.png, uploadify.swf
2. Bootstrap-DatetimePicker Selection
<div> <label for = "starttime"> starttime: </label> <div data-link-field = "dtp_input1"> <อินพุต id = "showtime" th: value = "$ {#dates.format type = "text" value = "" readonly = "อ่านอย่างง่าย"/> <span> <span> </span> </span> </span> </div> <อินพุต type = "hidden" id = "dtp_input1" name = "starttime"/> <br/> HH: MM: SS ', // ภาษาจีน:' zh-cn ', // วันใดของสัปดาห์เริ่มต้น 0 (วันอาทิตย์) ถึง 6 (วันเสาร์) Weekstart: 1, // แสดงปุ่ม "วันนี้" ที่ด้านล่างของส่วนประกอบวันวันที่เลือกวันนี้ 1, // มุมมองแรกที่แสดงหลังจากตัวเลือกวันที่ถูกเปิด: 2, // เมื่อตัวเลือกถูกปิดมันถูกบังคับให้แยกวิเคราะห์ค่าในกล่องอินพุต ForceParse: 0, Showmeridian: 1, // ค่านี้ใช้เป็นค่าขั้นตอนในการสร้างมุมมองชั่วโมง minUtestep: 1});เอฟเฟกต์สุดท้ายมีดังนี้:
3. อัปโหลดรูปภาพอัปโหลด
$ ("#file_upload"). uploadify ({'method': 'โพสต์', 'auto': จริง, // อัปโหลดอัตโนมัติโดยอัตโนมัติหลังจากเลือกรูปภาพ 'buttontext': 'อัพโหลดรูปภาพ', 'simuploadlimit': 1, 'cancelimg': ' "/uploadimage?_csrf="+$("#_csrf").val(),'swf ':' ../../../resources/js/uploadify.swf '// การดำเนินการหลังจากการอัปโหลด' onuploadsuccess ': ฟังก์ชัน (ไฟล์, ข้อมูล, การตอบสนอง)รหัสฝั่งเซิร์ฟเวอร์
@responsebody@requestmapping (value = "/uploadimage") สตริงสาธารณะ uploadimage (คำขอ httpservletRequest) พ่นข้อยกเว้น {responseObject <string> responseObject = ใหม่ตอบกลับ <string> (globalerRorCode.Sucess); Multipartrequest.getFilenames (); multipartFile multipartFile = multipartrequest.getFile (filenames.next ()); ... บันทึกหลายบรรทัดที่นี่ return url;}เอฟเฟกต์การแสดงผลสุดท้าย:
ข้างต้นเป็นบทสรุปของตัวอย่างแอปพลิเคชันของ DateTimePicker และอัปโหลดปลั๊กอินใน bootstrap แนะนำให้คุณรู้จักโดยตัวแก้ไข ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!