ใช้ bootstrap โดยตรงและใช้การควบคุม JS อย่างง่าย
http://duckranger.com/2012/06/pretty-file-input-field-in-bootstrap/
ง่ายมากรหัสมีดังนี้:
<อินพุต id = "lefile" type = "file" style = "จอแสดงผล: ไม่มี"> <div> <อินพุต id = "photocover" type = "text" style = "ความสูง: 30px;"> <a onclick = "$ ('input [id = lefile]') คลิก () $ ('อินพุต [id = lefile]'). การเปลี่ยนแปลง (ฟังก์ชั่น () {$ ('#photocover'). val ($ (นี่) .val ());}); </script>ผลกระทบมีดังนี้:
ไม่จำเป็นต้องใช้ JS และ CSS อื่น ๆ เพียงแค่แนะนำ bootstrap และ jQuery
ในความเป็นจริงสิ่งนี้ถูกประกบกันแล้ว JS จะควบคุมการแสดงชื่อไฟล์
ผลกระทบมีดังนี้:
สอง bootstrap-filestyle
http://markusslima.github.io/bootstrap-filestyle/
หมายเหตุ: สไตล์นี้สามารถใช้ CSS ของ Bootstrap2 เท่านั้นและรุ่น CSS ของ Bootstrap3 นั้นเข้ากันไม่ได้! - (ประณามฉันได้ทดสอบสิ่งนี้มานานแล้ว ..
ผลกระทบมีดังนี้:
สามอินพุต bootstrap-file
http://www.gregpike.net/demos/bootstrap-file-input/demo.html
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> bootstrap.file-input </title> <link href = "css/bootstrap.min.css" rel = "stylesheet"/> src = "js/jQuery-2.0.3.min.js"> </script> <script type = "text/javascript" src = "js/bootstrap.min.js"> </script> src = "js/bootstrap.file-input.js" <br> <br> <อินพุต type = "ไฟล์"> <br> <br> <br> <อินพุต type = "ไฟล์"> <br> <br> <br> <อินพุต type = "ไฟล์"> <br> <br> <br> <br> <br> <br> <br> ปิดการใช้งานสไตล์: <! $ ('input [type = file]'). bootstrapFileInput (); </script> </body> </html>Bootstrap.file-input.js ได้รับการแนะนำ แต่มีปัญหาเล็กน้อยแนะนำโดยตรงโดยบอกว่าไม่พบวิธี bootstrapfileinput ดังนั้นฉันจึงเปลี่ยน JS เล็กน้อย:
/* bootstrap - อินพุตไฟล์ ==================================== นี่หมายถึงการแปลงแท็กอินพุตไฟล์ทั้งหมดเป็นชุดขององค์ประกอบที่แสดงอย่างสม่ำเสมอในเบราว์เซอร์ทั้งหมด แปลงทั้งหมด <อินพุต type = "ไฟล์"> เป็นปุ่ม bootstrap <a> เรียกดู </a> */ $ .fn.bootstrapfileinput = function () {ที่นี่ฉันใช้วิธีนี้โดยตรงและลบบรรทัดก่อนหน้านี้ CSSHTML = '<style>'+ '.File-Input-Wrapper {Overflow: Hidden; ซ้าย: เคอร์เซอร์: ตัวชี้;โอเคถึงเวลาที่จะเห็นเอฟเฟกต์ ~~
สี่อัปโหลดที่ดี
http://fineuploader.com/demos.html
การดาวน์โหลดบนเว็บไซต์ทางการเป็นค่าธรรมเนียม - ฉันดาวน์โหลดหนึ่งรายการบน GitHub
ลิงค์ดาวน์โหลด
หลังจากดาวน์โหลดและคลายการบีบอัดดูเหมือนว่า:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> bootstrap.file-input </title> <link href = "css/bootstrap.min.css" rel = "Stylesheet"/> /> <script type = "text/javascript" src = "js/jQuery-2.0.3.min.js"> </script> <script type = "text/javascript" src = "js/all.fineuploader-4.3.1.min.js" id = "triggerUpload" style = "margin-top: 10px;"> <i> </i> อัปโหลดตอนนี้ </div> <script> $ (เอกสาร). พร้อม (ฟังก์ชั่น () {var manualUploader = $ ('#manual-fine-uploader') UploadButton: '<i> </i> เลือกไฟล์'}}); </script> <script> $ (เอกสาร) .ready (function () {$ ('#fine-uploader'). FinePloader ({request: {endpoint: 'เซิร์ฟเวอร์/handleuploads'}});}); </script> <!-อัพโหลดดี CSS =========================================================================== - - - - =================================================================================================================== type = "text/template" id = "qq-template"> <div> <div qq-hide-dropzone> <span> วางไฟล์ที่นี่เพื่ออัปโหลด </span> </div> <div> <div> อัปโหลดไฟล์ </div> </div> <span> <pan> <span> </span> <span> </span> <span> </span> <อินพุต tabindex = "0" type = "text"> <span> </span> <a href = "#"> ยกเลิก </a> <a href = "#"> retry </a> <a href = "#"> delete </a </html>JS และ CSS คุณสามารถค้นหาได้โดยค้นหาในโฟลเดอร์ แต่มี All.fineuploader-4.3.1.min.js ซึ่งฉันคัดลอกบนเว็บไซต์ทางการโดยใช้ Chrome เพื่อตรวจสอบองค์ประกอบ - สามารถใช้หลังจากการทดสอบ
ให้ความสนใจกับเทมเพลตในรหัสกลาง
หากส่วนนี้ไม่พร้อมใช้งานคอนโซลจะรายงานข้อผิดพลาด:
จากนั้นฉันก็พบเหตุผล:
คุณสามารถอ่านได้นั่นคือต้องมีไฟล์เทมเพลตให้เรียกใช้
เอฟเฟกต์มีดังนี้: (ภาพที่สอดคล้องกับ CSS ค่อนข้างน่าเกลียด)
เนื้อหาข้างต้นเกี่ยวข้องกับรูปแบบการอัปโหลดไฟล์ bootstrap ที่แนะนำโดยตัวแก้ไข ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน!