Utilisez Bootstrap directement et utilisez un contrôle JS simple
http://duckranger.com/2012/06/pretty-file-input-field-in-bootstrap/
Très simple, le code est le suivant:
<input id = "lefile" type = "file" style = "affiche: non"> <div> <input id = "Photover" type = "text" style = "height: 30px;"> <a onclick = "$ ('input [id = lefile]'). Click ();"> Browse </a> </v> <script type = "text / javascript"> $ ('input [id = lefile]'). change (function () {$ ('# photocover'). val ($ (this) .val ());}); </cript>Les effets sont les suivants:
Aucun autre JS et CSS n'est nécessaire, introduisez simplement Bootstrap et JQuery
En fait, cela est épissé, puis JS contrôle l'affichage du nom du fichier.
Les effets sont les suivants:
Deux bootstrap-filestyle
http://markusslima.github.io/bootstrap-filestyle/
Remarque: Ce style ne peut utiliser que le CSS de Bootstrap2, et la version CSS de Bootstrap3 est incompatible! ! (Merde, je le teste depuis longtemps.
Les effets sont les suivants:
Trois naisons bootstrap-fichier
http://www.gregpike.net/demos/bootstrap-file-input/demo.html
<! Doctype html> <html lang = "en"> <éad> <meta charset = "utf-8"> <itle> 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 / bootstrap.file-input.js"> </ script> </-head> <body> <! <br> <br> <entrée type = "file"> <br> <br> <br> <entrée type = "file"> <br> <br> <br> <entrée type = "file"> <br> <br> <br> <br> <br> <br> <br> Désactiver le style: <! - Désactiver le style -> <Type de type = "fichier" data-bfi-tisabled> $ ('input [type = file]'). bootstrapFileInput (); </cript> </ body> </html>Bootstrap.file-input.js a été introduit, mais il y a eu un peu de problème directement l'introduction, disant que la méthode BootstrapFileInput ne peut pas être trouvée. J'ai donc changé un peu JS:
/ * Bootstrap - Entrée de fichier ============================= Ceci est destiné à convertir toutes les balises d'entrée de fichier en un ensemble d'éléments qui s'affichent de manière cohérente dans tous les navigateurs. Convertit tous <entrée type = "fichier"> en boutons bootstrap <a> parcourir </a> * / $ .fn.bootstrapFileInput = function () {ici j'utilise directement cette méthode et supprime la ligne précédente ce.each (fonction (i, elem) {... ......... omis dans le milieu // Ajouter les styles avant le premier Stylesheet // CSShtml = '<Spoile>' + '. 0;Ok, il est temps de voir l'effet ~~
Quatre fines téléchargeurs
http://fineuploader.com/demos.html
Le téléchargement sur le site officiel est des frais. . J'en ai téléchargé un sur github.
Lien de téléchargement
Après avoir téléchargé et décompressé, cela ressemble à ceci:
<! Doctype html> <html lang = "en"> <éadf> <meta charset = "utf-8"> <itle> bootstrap.file-input </title> <link href = "css / bootstrap.min.css" rel = "Stylesheet" /> <link href = "csss / fineuploader.css" rel = "href =" csss / fineuploader.css "rel =" STYLESHETH = "CSSS / FineupLoador.CSS" REL = "STYLESHE =" CSSS / FINEUPLOADER.CSS "REL =" STYLESH / " <script type = "text / javascript" src = "js / jQuery-2.0.3.min.js"> </ script> <script type = "text / javascript" src = "js / all.fineuploder-4.3.1.min.js"> </cript> id = "TriggerUpload" style = "margin-top: 10px;"> <i> </i> upload maintenant </div> <cript> $ (document) .ready (function () {var manualuploader = $ ('# manual-fine-uploader'). fineuploader ({request: {endpoint: 'Server / handleuploads'}, autouplor '<i> </i> Sélectionner des fichiers'}}); $ ('# TRIGHUPLOAD'). Cliquez sur (fonction () {manualuploader.fineuploader ('uploadStoredFiles');}); </ script> <cript> $ (document) .ready (function () {$ ('# fine-uploader'). fineuploader ({request: {endpoint: 'server / handleuploads'}});}); </script> <!-- Fine Uploader CSS ========================================================================== --> <!-- Fine Uploader DOM Element ==========================================================================================================. ==========================================================================================================. ==========================================================================================================. ===========================================================================================================. =================================================================================================================. type = "text / template" id = "qq-timplate"> <div> <div qq-hide-dropzone> <span> déposez les fichiers ici pour télécharger </span> </div> le traitement des fichiers supprimés ... </span> <pan> </span> </span> <ul> <li> <p> <pons <span> </span> <span> </span> <span> </span> <input tabindex = "0" type = "text"> <span> </span> <a href = "#"> annuler </a> <a href = "#"> Rettry </a> <a href = "#"> </a> <pan> </pan> </li> </f> </html>JS et CSS, vous pouvez le trouver en recherchant dans le dossier, mais il y a un all.fineuploader-4.3.1.min.js, que j'ai copié sur le site officiel à l'aide de Chrome pour revoir les éléments. . Il peut être utilisé après le test
Faites attention au modèle dans le code intermédiaire
Si cette section n'est pas disponible, la console rapportera une erreur:
Ensuite, j'ai trouvé une raison:
Vous pouvez le lire, c'est-à-dire qu'il doit y avoir un fichier de modèle à exécuter.
L'effet est le suivant: (L'image correspondant à CSS est un peu moche)
Le contenu ci-dessus est lié au style de téléchargement de fichiers bootstrap qui vous est présenté par l'éditeur. J'espère que ce sera utile à tous!