Use bootstrap directamente y use control JS simple
http://duckranger.com/2012/06/pretty-file-input-field-in-bootstrap/
Muy simple, el código es el siguiente:
<input id="lefile" type="file" style="display:none"> <div> <input id="photoCover" type="text" style="height:30px;"> <a onclick="$('input[id=lefile]').click();">Browse</a> </div> <script type="text/javascript"> $ ('input [id = Lefile]'). Change (function () {$ ('#Photocover'). Val ($ (this) .val ());}); </script>Los efectos son los siguientes:
No se necesita otro JS y CSS, solo introduce Bootstrap y JQuery
De hecho, esto se empalma, y luego JS controla la visualización del nombre del archivo.
Los efectos son los siguientes:
Dos bootstrap-filestyle
http://markusslima.github.io/bootstrap-filestyle/
Nota: Este estilo solo puede usar el CSS de Bootstrap2, ¡y la versión CSS de Bootstrap3 es incompatible! ! (Maldita sea, he estado probando esto durante mucho tiempo.
Los efectos son los siguientes:
Tres bootstrap-file-entrada
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"/> <script type = "text/javascript" " 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> </feT> <Body> <!-Cambiar el uso de un título con un título de un título. <br> <br> <input type = "file"> <br> <br> <br> <input type = "file"> <br> <br> <br> <input type = "file"> <br> <br> <br> <br> <br> <br> <br> disable el estilo de estilo: <!-Disable el textación de data> <input type = "data-bfi-disaped $ ('input [type = file]'). BootStraPFileInput (); </script> </body> </html>Se introdujo bootstrap.file-input.js, pero hubo un pequeño problema que lo introdujo directamente, diciendo que no se puede encontrar el método BootstraPFileInput. Entonces cambié un poco de JS:
/* Bootstrap - Input de archivo ============================== ESTO ESTÁ ENVIERTO DE CONVERTIDO TODAS LAS ETIVAS DE INTERIOR DEL ARCHIVO EN UNA ESTÁN Convierte todo <input type = "file"> en botones de arranque <a> navegar </a> */ $ .fn.bootstrapFileInput = function () {Aquí uso este método directamente y elimino la línea anterior this.each (function (i, elem) {......... omitido en el medio // Agregar los estilos antes de la primera estilos // esto puede ser fácilmente anevado con los estilos de desarrollo fácilmente con los estilos. csshtml = '<syle>'+ '.File-Input-Wrapper {Overflow: Hidden; 0;Ok, es hora de ver el efecto ~~
Cuatro cargadores finos
http://fineuploader.com/demos.html
Descargar en el sitio web oficial es una tarifa. . Descargué uno en Github.
Enlace de descarga
Después de descargar y descomprimir, se ve así:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> bootstrap.file-input </title> <link href = "css/bootstrap.min.css" rel = "Stylesheet"/> <link href = "css/bine.uploader.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.js"> </scrute> </head> <body <body <bebr> <bebr> <bebr> id = "Manual-Fine-Suploader"> </iv> <div id = "TriggerUpload" style = "margin-top: 10px;"> <i> </i> cargar ahora </div> <script> $ (document) .ready (function () {var manualuploader = $ (##manual-fine-oploader '). bien 'Server/HandleUploads'}, AutoUpload: False, Text: {uploadButton: '<i> </i> seleccione archivos'}}); </script> <script> $ (documento) .Ready (function () {$ ('#fine-suploader'). Fineuploader ({request: {endpoint: 'server/handleuploads'}});}); </script> <!-Fine Subloader CSS ================================================================================================================================================================-<! ==================================================================================================================================================================================================================================================================================================. ==================================================================================================================================================================================================================================================================================================. ==================================================================================================================================================================================================================================================================================================. ========================================================================================================== ============================================================================================================== --> <script type = "Text/Template" id = "qq-template"> <iv> <div Qq-hide-dropzone> <span> suelte los archivos aquí para cargar </span> </div> <div> <div> <div> cargar un archivo </div> </div> <div> <span> <span> procesar archivos sueltos ... </span> <pan> </span> </span> <ul> <li <viv> divit> div> div> divit> <span> </span> <span> </span> <span> </span> <input tabindex = "0" type = "text"> <span> </span> <a href = "#"> cancelar </a> <a href = "#"> retry </a> <a href = "#"> Eliminar </a> </span> </li> </li> </diviv> </diviv. </html>JS y CSS, puede encontrarlo buscando en la carpeta, pero hay un All.Fineuploader-4.3.1.min.js, que copié en el sitio web oficial utilizando Chrome para revisar elementos. . Se puede usar después de la prueba
Preste atención a la plantilla en el código intermedio
Si esta sección no está disponible, la consola informará un error:
Entonces encontré una razón:
Puede leerlo, es decir, debe haber un archivo de plantilla para ejecutar.
El efecto es el siguiente: (la imagen correspondiente a CSS es un poco fea)
El contenido anterior está relacionado con el estilo de carga de archivos Bootstrap introducido por el editor. ¡Espero que sea útil para todos!