2017-06-15 26 views
1

以下のコードでfileinputを使用するためのセットアップフォームがあります。 HTML私は私のprblemが、これはちょうど私が私のコードで指定した実際のFileInputクラスの機能を使用せず、私のページにリロードアイコンを置くあるファイル私のプロジェクトでFileinputが動作しません

<!DOCTYPE html> 
    <html lang="en"> 

    <head> 
     <!-- Bootstrap Core CSS --> 
     <link href="assets/bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet"/> 

     <!--- JQuery ---> 
     <script type="text/javascript" src="assets/jquery/jquery.min.js"></script> 

     <!--- JQuery UI---> 
     <script type="text/javascript" src="assets/jquery-ui/jquery-ui.min.js"></script> 
     <link rel="stylesheet" type="text/css" href="assets/jquery-ui/jquery-ui.min.css"/> 

     <!--- Bootstrap.js---> 
     <script type="text/javascript" src="assets/bootstrap/js/bootstrap.min.js"></script> 

     <!--- File Input ---> 
     <link rel="stylesheet" type="text/css" href="assets/plugins/fileinput/css/fileinput.min.css"/> 

    </head> 

    <body> 

     <!--- File Input JS---> 
     <script type="text/javascript" src="assets/plugins/fileinput/js/plugins/canvas-to-blob.min.js"></script> 
     <script type="text/javascript" src="assets/plugins/fileinput/js/plugins/sortable.min.js"></script> 
     <script type="text/javascript" src="assets/plugins/fileinput/js/plugins/purify.min.js"></script> 

     <script type="text/javascript" src="assets/plugins/fileinput/js/fileinput.min.js"></script> 
     <script type="text/javascript" src="assets/plugins/fileinput/js/jquery-fileinput/dist/jquery.fileinput.min.js"></script> 


<!-- avatar markup--> 
<div id="kv-avatar-errors-1" class="center-block" style="width:800px;display:none;"></div> 
<div class="kv-avatar center-block" style="width:200px;"> 
<input type="file" id="productImage" name="productImage" class="file-loading" style="width:auto;"/> 
</div> 
</div> 

    $(document).ready(function(){ 
    $('#productImage').fileinput({ 
     overwriteInitial: true, 
     maxFileSize: 1500, 
     showClose: false, 
     showCaption: false, 
     browseOnZoneClick: true, 
     removeLabel: '', 
     browseIcon: '<i class="glyphicon glyphicon-folder-open"></i>', 
     removeIcon: '<i class="glyphicon glyphicon-remove"></i>', 
     removeTitle: 'Cancel or reset changes', 
     elErrorContainer: '#kv-avatar-errors-1', 
     msgErrorClass: 'alert alert-block alert-danger', 
     defaultPreviewContent: '<img src="assets/images/sample.png" alt="Your 
Avatar" style="width:160px">', 
     layoutTemplates: { 
     main2: '{preview} {remove} {browse}' 
     }, 
     allowedFileExtensions: [ 
     "jpg", 
     "png", 
     "gif" 
     ] 

    }); 
    }); 

を含む部分。 Firefoxは私にこのエラーを教えてくれます:TypeError:$(...)。fileinputは関数ではありません[詳細はこちら]なぜブートストラップファイルインプットがその機能を既に持っていると想定しているのか分かりません。

誰かが私を助けてくれますか? 3日後、私は自分のコードを調べています。どこが間違っているのか分かりません。

答えて

1

私はjQueryを使用しませんが、あなたのケースでは、jQueryプラグインがないようです。 jQuery Pluginsをご覧ください。

また、同じサイトではあなたが実際にそれを見ることができる素敵なdemoを提供します。

+0

jqueryのプラグインがそのまま動作しています。 FirefoxデバッガはTypeError:$(...)と言っています。fileinputは関数ではありません[詳細] –

+0

プラグインがロードされていないことを示します。 jQueryにロードする方法についてのリンクを確認してください –

+0

どのプラグインですか? jqueryまたはfileinputプラグイン? –

関連する問題