Bootstrapを直接使用し、簡単なJSコントロールを使用します
http://duckranger.com/2012/06/pretty-file-input-field-in-bootstrap/
非常にシンプルで、コードは次のとおりです。
<入力ID = "lefile" type = "file" style = "display"> <div> <input id = "photocover" type = "text" style = "height：30px;"> <a onclick = "$（ 'input [id = lefile]'）。 $（ 'input [id = lefile]'） </script>
効果は次のとおりです。
他のJSやCSSは必要ありません。BootstrapとJQueryを紹介するだけです
実際、これはスプライスされているため、JSはファイル名の表示を制御します。
効果は次のとおりです。
2つのBootstrap-fileStyle
http://markusslima.github.io/bootstrap-filestele/
注：このスタイルはBootstrap2のCSSのみを使用でき、Bootstrap3のCSSバージョンは互換性がありません！ ！ （くそー、私はこれを長い間テストしてきました。
効果は次のとおりです。
3つのブートストラップファイル入力
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.cs" rel = "styleSheet"/> <スクリプト= "テキスト/javascript src = "js/jquery-2.0.3.min.js"> </script> <スクリプトタイプ= "text/javascript" src = "js/bootstrap.min.js"> </scrip> src = " <br> <br> <input type = "file"> <br> <br> <br> <input type = "file"> <br> <br> <br> <input type = "> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> $（ 'input [type = file]'）。bootstrapfileinput（）; </script> </body> </html>
bootstrap.file-input.jsが導入されましたが、BootstrapfileInputメソッドが見つからないと言って、それを直接導入するのは少し問題がありました。だから私は少しjsを変更しました：
/* bootstrap-ファイル入力======================================================================================すべての<入力型= "ファイル">をブートストラップボタン<a>に変換</a> csshtml = '<style>'+ '。左翼：0 Z-Index：0;
さて、効果を見る時が来ました~~
4つの細かいアップローダー
http://fineuploader.com/demos.html
公式ウェブサイトでダウンロードするのは料金です。 。 GitHubにダウンロードしました。
ダウンロードリンク
ダウンロードして減圧した後、次のようになります。
<！Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> bootstrap.file-input </title> <link href = "css/bootstrap.min.css" rel = "styleSheet"/> <リンク/> <script = "text/javascript" src = "js/jquery-2.0.3.min.js"> </script> <script> <script type = "text/javascript" src = "js/all.fineuploader-4.3.1.min.js"> </</scrip <div id = "triggerupload" style = "mirvight-top：10px;"> <i> <i> </i> upload now </div> <script> $（document> $）.ready（var manualuploader = $（ '＃manual-fine-uploader'）。 {uploadbutton： '<i> </i> selece'}}）; </script> <script> $（document）.ready（function（）{$（ '＃fine-uploader'）。 </script> <！ - 細かいアップローダーCSS ========================================================================================================== ========================================================================================= ========================================================================================= ========================================================================================= ============================================================================================================================================ ============================================================================================ type = "text/template" id = "qq-template"> <div> <div qq-hide-dropzone> <span>ここにドロップファイルをアップロードする</span> </div> <div> <div> div> <span <span> span>処理ドロップされたファイル... <span> </span> <span> </span> <span> </span> <input tabindex = "0" type = "text"> <span> </span> <a href = "＃">キャンセル</a> <a href = " </html>JSとCSSは、フォルダーで検索することで見つけることができますが、all.fineuploader-4.3.1.min.jsがあります。 。テスト後に使用できます
中間コードのテンプレートに注意してください
このセクションが利用できない場合、コンソールはエラーを報告します。
それから私は理由を見つけました：
あなたはそれを読むことができます、つまり、実行するテンプレートファイルが必要です。
効果は次のとおりです。（CSSに対応する写真は少し醜いです）
上記のコンテンツは、編集者が紹介したブートストラップファイルのアップロードスタイルに関連しています。私はそれが誰にでも役立つことを願っています！