Gunakan Bootstrap secara langsung, dan gunakan kontrol JS sederhana
http://duckranger.com/2012/06/pretty-file-put-field-in-bootstrap/
Sangat sederhana, kodenya adalah sebagai berikut:
<Input ID = "Lefile" type = "file" style = "display: none"> <div> <input id = "photocover" type = "text" style = "height: 30px;"> <a onclick = "$ ('input [id = lefile]'). Klik ();"> Browse </a> </Div> <script type = " $ ('input [id = lefile]'). ubah (function () {$ ('#photocover'). val ($ (this) .val ());}); </script>Efeknya adalah sebagai berikut:
Tidak ada JS dan CSS lain yang dibutuhkan, cukup perkenalkan Bootstrap dan JQuery
Bahkan, ini disambung keluar, dan kemudian JS mengontrol tampilan nama file.
Efeknya adalah sebagai berikut:
Dua gaya bootstrap
http://markusslima.github.io/bootstrap-filestyle/
Catatan: Gaya ini hanya dapat menggunakan CSS Bootstrap2, dan versi CSS dari Bootstrap3 tidak kompatibel! Lai (Sialan, saya sudah lama menguji ini ..
Efeknya adalah sebagai berikut:
Tiga-input file bootstrap
http://www.gregpike.net/demos/bootstrap-file-putput/demo.html
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <itement> bootstrap.file-input </iteme> <link href = "css/bootstrap.min.css" rel = "stylesheet"/<script type/javas/javas/javas.css " 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"> </script> </head> </input —king-input. <br> <br> <input type = "file"> <br> <br> <br> <input type = "file"> <br> <br> <br> <input type = "file"> <br> <br> <br> <br> <br> <br> <br> nonaktifkan styling: <!-nonaktifkan styling-> <br> "pext" <br> "DATA" DATA "DATA" DATA "DATA" DATA "DATA" $ ('input [type = file]'). bootstrapfileInput (); </script> </body> </html>Bootstrap.file-input.js diperkenalkan, tetapi ada sedikit masalah yang secara langsung memperkenalkannya, mengatakan bahwa metode BootstrapFileInput tidak dapat ditemukan. Jadi saya mengubah sedikit JS:
/* Bootstrap - input file =============================== Ini dimaksudkan untuk mengubah semua tag input file menjadi satu set elemen yang ditampilkan secara konsisten di semua browser. Converts all <input type="file"> into Bootstrap buttons <a>Browse</a> */ $.fn.bootstrapFileInput = function() { Here I use this method directly and delete the previous line this.each(function(i,elem){ .........Omitted in the middle // Add the styles before the first stylesheet // This ensures they can be easily overridden with developer styles var csshtml = '<style>'+ '.file-input-wrapper {overflow: Hidden; LIFT;Oke, saatnya untuk melihat efeknya ~~
Empat pengunggah yang bagus
http://fineuploader.com/demos.html
Mengunduh di situs web resmi adalah biaya. . Saya mengunduh satu di github.
Tautan unduh
Setelah mengunduh dan mendekompresi, sepertinya ini:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <itement> bootstrap.file-input </iteme> <link href = "css/bootstrap.min.css" rel = "stylesheet"/<link href = "csss" rel = "stylesheet"/<link href = "csss" rel = "stylesheet"/<link href = "csss" rel = "stylesheet"/<link href = "csss" <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"></script> </head> <body> <br> <div id="manual-fine-uploader"></div> <div id = "triggeruppload" style = "margin-top: 10px;"> <i> </i> unggah sekarang </div> <script> $ (dokumen) .ready (function () {var manualuploader = $ ('#manual-fine-ucloader'). fineuploader ({request: {endpoint: 'server/everploader'). unggah: '<i> </i> Pilih file'}}); </script> <script> $ (document) .ready (function () {$ ('#fine-uploader'). fineuploader ({request: {endpoint: 'server/handleuploads'}});}); </script> <!-unggah baik css ==================================================================================================================================================================== ======================================================================================================================================================== ======================================================================================================================================================== ======================================================================================================================================================= ====================================================================================================================================================================== ==================================================================================================================================================== type="text/template" id="qq-template"> <div> <div qq-hide-dropzone> <span>Drop files here to upload</span> </div> <div> <div>Upload a file</div> </div> <span> <span>Processing dropped files...</span> <span></span> </span> <ul> <li> <div> <div></div> </div> <span></span> <span></span> <span></span> <input tabindex="0" type="text"> <span></span> <a href="#">Cancel</a> <a href="#">Retry</a> <a href="#">Delete</a> <span></span> </li> </ul> </div> </script> </body> </html>JS dan CSS, Anda dapat menemukannya dengan mencari di folder, tetapi ada all.fineuploader-4.3.1.min.js, yang saya salin di situs web resmi menggunakan Chrome untuk meninjau elemen. . Itu dapat digunakan setelah pengujian
Perhatikan templat dalam kode perantara
Jika bagian ini tidak tersedia, konsol akan melaporkan kesalahan:
Kemudian saya menemukan alasan:
Anda dapat membacanya, yaitu, harus ada file templat untuk dijalankan.
Efeknya adalah sebagai berikut: (gambar yang sesuai dengan CSS sedikit jelek)
Konten di atas terkait dengan gaya unggahan file bootstrap yang diperkenalkan kepada Anda oleh editor. Saya harap ini akan membantu semua orang!