2017-06-15 54 views
1

我有一個設置窗體使用fileinput與下面的代碼。 HTML,我包含的文件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" 
     ] 

    }); 
    }); 

我prblem這只是提出一個重新加載圖標我的網頁上沒有我在我的代碼中指定的實際的FileInput功能的一部分。 Firefox給我這個錯誤:TypeError:$(...)。fileinput不是一個函數[瞭解更多]我不明白爲什麼這是因爲我期待bootstrap fileinput已經設置該功能。

請有人可以幫助我嗎?現在有三天我一直在檢查我的代碼,我不知道我哪裏出錯了。

回答

1

我不使用jQuery,但在你的情況下,你似乎缺少一個jQuery插件。看看jQuery Plugins

此外,同一個網站爲您提供了一個不錯的demo,您可以在其中看到它的實際使用情況。

+0

我的jquery插件是完好無損的工作。 Firefox調試器說TypeError:$(...)。fileinput不是一個函數[瞭解更多] –

+0

它告訴你插件未加載。檢查我提供的關於如何將其加載到jQuery的鏈接 –

+0

哪個插件? jquery或fileinput插件? –

相關問題