Question

我有一个设置表单，使用fileinput和下面的代码。 HTML包含文件的部分

    <!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不是函数[了解更多] 我不明白为什么这是因为我希望bootstrap fileinput具有设置功能已经。

有人可以帮帮我吗？三天，我一直在查看我的代码，我不知道哪里出错了。

Answer 1

我不使用jQuery，但在你的情况下，你似乎缺少一个jQuery插件。看看jQuery Plugins。

此外，同一网站为您提供了一个不错的demo，您可以在其中看到它。

$(document).ready(function() {
    $("input[type=file][name=foo]").fileinput();
    $("input[type=file][name=bar]").fileinput("<button>Search...</button>");
    $("input[type=file][name=baz]").fileinput($("#replacement").remove());
});

Fileinput在我的项目中不起作用

1 个答案: