Verwenden Sie den Bootstrap direkt und verwenden Sie eine einfache JS -Steuerung
http://duckranger.com/2012/06/pretty-file-inputfield-for-bootstrap/
Sehr einfach, der Code ist wie folgt:
<input id = "LeFile" type = "Datei" style = "display: none"> <div> <input id = "photocover" type = "text" style = "height: 30px;"> <a onclick = "$ ('Eingabe [id = leFile]'). Click (); $ ('input [id = leFile]'). ändern (function () {$ ('#photocover'). val ($ (this) .val ());}); </script>Die Effekte sind wie folgt:
Es ist kein anderes JS und CSS erforderlich. Führen Sie einfach Bootstrap und JQuery ein
Tatsächlich ist dies ausgespannter und dann steuert JS die Anzeige des Dateinamens.
Die Effekte sind wie folgt:
Zwei Bootstrap-Filestyle
http://markusslima.github.io/bootstrap-filestyle/
Hinweis: Dieser Stil kann nur die CSS von Bootstrap2 verwenden, und die CSS -Version von Bootstrap3 ist unvereinbar! ! (Verdammt, ich habe das schon lange getestet.
Die Effekte sind wie folgt:
Drei Bootstrap-File-Eingang
http://www.gregike.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 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> <body> <!-- Change the wording using a title tag --> <input type="file"> <br> <br> <Eingabe type = "file"> <br> <br> <br> <Eingabe type = "file"> <br> <br> <br> <Eingabe type = "file"> <br> <br> <br> <br> <br> <br> <br> das Styling deaktivieren: <!-Deaktiviert das Styling-> <Eingabe type = "Datei" Datentyp "Datentyp" Datentyp "Datentyp"-Datentyp "Datentyp"-Datentyp "Datentyp"-Datentyp "Datentyp"-Datentyp "Data", "Data" -Daten-bfi-disabled> <Script ". $ ('input [type = file]'). BootstrapfileInput (); </script> </body> </html>Bootstrap.file-Input.js wurde eingeführt, aber es gab ein wenig Probleme, es direkt einzuführen und sagte, dass die BootstrapfileInput-Methode nicht gefunden werden kann. Also habe ich ein wenig JS geändert:
/* Bootstrap - Datei input =========================================================================================================== alle Dateieingabetags in eine Reihe von Elementen, die in allen Browsern konsistent angezeigt werden, konvertieren. Konvertiert alle <Eingabe type = "file"> in Bootstrap -Schaltflächen <a> Durchsuchen </a> */ $ .fn.bootstrapfileput = function () {Hier verwende ich diese Methode direkt und lösche die vorherige Zeile dieses Zeilen. CSSHTML = '<Styles>'+ '. Datei-Input-Wrapper {Überlauf: Relativ; 0;Ok, es ist Zeit, den Effekt zu sehen ~~
Vier feine Uploader
http://fineuploader.com/demos.html
Das Herunterladen auf der offiziellen Website ist eine Gebühr. . Ich habe einen auf GitHub heruntergeladen.
Link herunterladen
Nach dem Herunterladen und Dekomprimieren sieht es so aus:
<! DocType html> <html Lang = "en"> <head> <meta charset = "utf-8"> <title> bootstrap.file-Input </title> <link href = "css/bootstrap.min /> <script type = "text/javaScript" src = "js/jQuery-2.0.3.min id="triggerUpload" style="margin-top: 10px;"> <i></i> Upload now </div> <script> $(document).ready(function() { var manualuploader = $('#manual-fine-uploader').fineUploader({ request: { endpoint: 'server/handleUploads' }, autoUpload: false, text: { UploadButton: '<i> </i> Dateien'}}); </script> <script> $ (document) .ready (function () {$ ('#fine-UPLoader'). fineUploader ({request: {endpoint: 'server/handleUploads'}});}); </script> <!-- Fine Uploader CSS ========================================================================== --> <!-- Fine Uploader DOM Element ==========================================================ieben ==========================================================ieben ==========================================================ieben ==================================================================ieben ==============================================ieben type = "text/template" id = "qq-template"> <div> <div qq-hide-dropzone> <span> Dropdateien hier zum Hochladen von </span> </div> <div> <div> laden Sie eine Datei hoch. <span> </span> <span> </span> <span> </span> <Eingabe tabindex = "0" type = "text"> <span> </span> <a href = "#"> civile </a> <a href = "#"> retry </a> </lif = "#"#"#: </html>JS und CSS, Sie können es finden, indem Sie im Ordner suchen, aber es gibt einen All.Fineuploader-4.3.1.min.js, den ich auf der offiziellen Website mit Chrome kopiert habe, um Elemente zu überprüfen. . Es kann nach dem Test verwendet werden
Achten Sie auf die Vorlage im Zwischencode
Wenn dieser Abschnitt nicht verfügbar ist, meldet die Konsole einen Fehler:
Dann fand ich einen Grund:
Sie können es lesen, das heißt, es muss eine Vorlagendatei ausführen.
Der Effekt ist wie folgt: (Das Bild entspricht CSS ist etwas hässlich)
Der oben genannte Inhalt bezieht sich auf den von dem Editor vorgelegten Bootstrap -Datei -Upload -Stil. Ich hoffe, es wird für alle hilfreich sein!