Use Bootstrap diretamente e use o controle JS simples
http://duckranger.com/2012/06/pretty-file-input-field-in-bootstrap/
Muito simples, o código é o seguinte:
<input id = "lefile" type = "file" style = "display: nenhum"> <div> <insput id = "photocover" type = "text" style = "altura: 30px;"> <a onclick = "$ ('input [id = lefile]'). click (); $ ('entrada [id = lefile]'). alteração (function () {$ ('#fotocover'). val ($ (this) .val ());}); </script>Os efeitos são os seguintes:
Nenhum outro JS e CSS é necessário, basta introduzir Bootstrap e JQuery
De fato, isso é emendado e, em seguida, o JS controla a exibição do nome do arquivo.
Os efeitos são os seguintes:
Dois bootstrap-filyle
http://markusslima.github.io/bootstrap-filestyle/
Nota: Esse estilo pode usar apenas o CSS do Bootstrap2, e a versão CSS do Bootstrap3 é incompatível! ! (Caramba, eu tenho testado isso há muito tempo ..
Os efeitos são os seguintes:
Três entrada de bootstrap-arquivo
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 = "" " 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> </script> </script> type = "file"> <br> <br> <input type = "file"> <br> <br> <br> <input type = "file"> <br> <br> <br> <bring type = "file"> <br> <br> <br> <br> <br> <br> <br> Disable o estilo: <!-Dispableling- type = "text/javascript"> $ ('input [type = file]'). bootstrapfileInput (); </script> </body> </html>Foi introduzido o bootstrap.file-input.js, mas houve um pequeno problema a introduzi-lo diretamente, dizendo que o método do bootstrapfileInput não pode ser encontrado. Então eu mudei um pouco de JS:
/* Bootstrap - Entrada do arquivo ============================== Isso deve converter todas as tags de entrada de arquivo em um conjunto de elementos que exibem de forma consistente em todos os navegadores. Converte tudo <input type = "file"> em botões de bootstrap <a> navegue </a> */ $ .fn.bootstrapfileInput = function () {aqui eu uso esse método diretamente e exclua os estilos anteriores. = 'Style>'+. Ponteiro;Ok, é hora de ver o efeito ~~
Quatro uploads finos
http://fineuploader.com/demos.html
Download no site oficial é uma taxa. . Eu baixei um no Github.
Baixar link
Após o download e descompressão, parece o seguinte:
<! 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 /> <script type = "text/javascript" src = "js/jQuery-2.0.3.min.js"> </script> <script type = "text/javascript" src = "js/all.fineuploader-4.3.min.js"> </script> id = "manual-fine-uploader"> </div> <div id = "triggerUpload" style = "margin-top: 10px;"> <i> </i> upload agora </div> <cript> $ (document) .ready (function () {var manualUplader = $ ('#manual-fine-pl) 'servidor/handleoupload'}, automaticamente: false, texto: {uploadbutton: '<i> </i> Selecionar arquivos'}}); </script> <cript> $ (document) .ready (function () {$ ('#fine-uploader'). fineuploader ({request: {endpoint: 'server/handleuploads'}});}); </script> <!-uploader css ===============================================================================-! ========================================================================================================= ========================================================================================================= ========================================================================================================= ========================================================================================================== ============================================================================================================== --> <script TIPO = "Texto/modelo" id = "qq-template"> <div> <div qq-hide-dropzone> <pan> Drop arquivos aqui para fazer upload </span> </div> <div> <div> carregar um arquivo </niv> </div> </span> <lpan> Processando arquivos suspensos ... </span> </np> </span> </span> </span> </span> </span> </span> </span> <lp> <lg> Processando arquivos ... </span> </span> <pan> </span> <pan> </span> <input tabindex = "0" type = "text"> <pan> </span> <a href = "#"> cancel </a> <a href = "#"> retry </a> <a href = "#"> Delete <ua> </body> </html>JS e CSS, você pode encontrá-lo pesquisando na pasta, mas há um all.fineuploader-4.3.1.min.js, que copiei no site oficial usando o Chrome para revisar elementos. . Pode ser usado após o teste
Preste atenção ao modelo no código intermediário
Se esta seção não estiver disponível, o console relatará um erro:
Então eu encontrei um motivo:
Você pode lê -lo, ou seja, deve haver um arquivo de modelo para ser executado.
O efeito é o seguinte: (A imagem correspondente ao CSS é um pouco feia)
O conteúdo acima está relacionado ao estilo de upload do arquivo de bootstrap, introduzido pelo editor. Espero que seja útil para todos!