استخدم bootstrap مباشرة ، واستخدم التحكم البسيط JS
http://duckranger.com/2012/06/pretty-file-input-field-in-bootstrap/
بسيط للغاية ، الرمز كما يلي:
<input id = "lefile" type = "file" style = "display: none"> <viv> <input id = "photoCover" type = "text" style = "height: 30px ؛ $ ('input [id = lefile]'). التغيير (function () {$ ('#photoCover'). val ($ (this) .val ()) ؛}) ؛ </script>الآثار هي كما يلي:
لا توجد حاجة إلى أخرى JS و CSS ، فقط تقديم bootstrap و jQuery
في الواقع ، يتم تقسيم هذا ، ثم يتحكم JS في عرض اسم الملف.
الآثار هي كما يلي:
اثنين من bootstrap-filestyle
http://markusslima.github.io/boostrap-filestyle/
ملاحظة: يمكن لهذا النمط استخدام CSS فقط من bootstrap2 ، ونسخة CSS من bootstrap3 غير متوافقة! ! (اللعنة ، لقد كنت أختبر هذا لفترة طويلة ..
الآثار هي كما يلي:
ثلاثة bootstrap-file-input
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 type = "file"> <br> <br> <input type = "file"> <br> <br> <br> <bring type = "file"> <br> <br> <br> <input type = "file"> <br> <br> <br> <brants> <br> <br> <br> تعطيل التصميم: <! type = "text/javaScript"> $ ('input [type = file]'). botstrapfileInput () ؛ </script> </body> </html>تم تقديم bootstrap.file-input.js ، ولكن كانت هناك مشكلة صغيرة في تقديمها مباشرة ، قائلة إنه لا يمكن العثور على طريقة bootstrapfileInput. لذلك قمت بتغيير القليل من JS:
/* bootstrap - إدخال الملف =============================== هذا هو تحويل جميع علامات إدخال الملف إلى مجموعة من العناصر التي تعرض باستمرار في جميع المتصفحات. يحول كل <إدخال type = "file"> إلى أزرار bootstrap <a> تصفح </a> */ $ .fn.bootstrapfileinput = function () {هنا أستخدم هذه الطريقة مباشرة وحذف الخط السابق هذا. = style>. المؤشر: 0 ؛حسنًا ، حان الوقت لرؤية التأثير ~~
أربعة تحميلات جيدة
http://fineuploader.com/demos.html
التنزيل على الموقع الرسمي هو رسوم. . لقد قمت بتنزيل واحد على جيثب.
الرابط تنزيل
بعد التنزيل وإزالة الضغط ، يبدو أن هذا:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> bootstrap.file-input </title> <link href = "css/bootstrap.min.css ) id = "manual-fine-uploader"> </div> <div id = "triggerupload" style = "margin-top: 10px ؛"> <i> </i> تحميل الآن </div> <script> $ (document) .Ready () نقطة نهاية: "خادم/مقبض"} ، Autoupload: False ، Text: {ToploadButton: '<i> </i> حدد ملفات'}) ؛ </script> <script> $ (document) .Ready (function () {$ ('#fine-uploader'). </script> <!-- Fine Uploader CSS ========================================================================== --> <!-- Fine Uploader DOM Element ================================================================================================================================= ================================================================================================================================= ================================================================================================================================= ==================================================================================================================================== ========================================================================================================================================================== type = "text/template" id = "qq-template"> <viv> <div qq-hide-dropzone> <span> drop files هنا للتحميل </span> </div> <viv> <span> </span> <span> </span> <span> </span> <input tabindex = "0" type = "text"> <span> </span> <a href = "#"> إلغاء </a> <a href = "#" </html>JS و CSS ، يمكنك العثور عليه من خلال البحث في المجلد ، ولكن هناك all.fineuploader-4.3.1.min.js ، والتي قمت بنسخها على الموقع الرسمي باستخدام Chrome لمراجعة العناصر. . يمكن استخدامه بعد الاختبار
انتبه إلى القالب في الكود الوسيط
إذا لم يكن هذا القسم متاحًا ، فستبلغ وحدة التحكم عن خطأ:
ثم وجدت سببًا:
يمكنك قراءتها ، أي يجب أن يكون هناك ملف قالب.
التأثير على النحو التالي: (الصورة المقابلة لـ CSS قبيحة بعض الشيء)
يرتبط المحتوى أعلاه بأسلوب تحميل ملف bootstrap الذي قدمه لك المحرر. آمل أن يكون ذلك مفيدًا للجميع!