Question

我正在尝试实施JQuery File-Upload（http://blueimp.github.io/jQuery-File-Upload/basic.html）。

问题是当我选择文件时它没有反应。

有几个问题可以提供帮助：

Chrome控制台中没有错误。
选择文件不会发送到任何位置。

你知道问题出在哪里吗？

选择文件后没有任何操作。

这是html：

<span class="btn btn-success fileinput-button">
    <i class="glyphicon glyphicon-plus"></i>
    <span>Select files...</span>
    <!-- The file input field used as target for the file upload widget -->
    <input id="fileupload" type="file" name="files[]" multiple="">
</span>
<br>
<br>
<!-- The global progress bar -->
<div id="progress" class="progress">
    <div class="progress-bar progress-bar-success"></div>
</div>
<!-- The container for the uploaded files -->
<div id="files" class="files"></div>

在<head>：

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>

这是在底部（在关闭body标签之前）：

   <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
    <script src="/static/js/cookies.js"></script>
    <script src="/static/theme/assets/js/bootstrap.min.js"></script>
    <!-- Metis Menu Js -->
    <script src="/static/theme/assets/js/jquery.metisMenu.js"></script>
    <!-- Custom Js -->
    <!-- Morris Chart Js -->
    <script src="/static/theme/assets/js/morris/raphael-2.1.0.min.js"></script>
    <script src="/static/theme/assets/js/morris/morris.js"></script>
    <script src="/static/theme/assets/js/custom-scripts.js"></script>


    <script src="/static/theme/assets/js/easypiechart.js"></script>
    <script src="/static/theme/assets/js/easypiechart-data.js"></script>

    <script src="/static/theme/assets/js/Lightweight-Chart/jquery.chart.js"></script>

    <script src="/static/dashboardapp/jQuery-File-Upload/js/vendor/jquery.ui.widget.js"></script>
    <script src="/static/dashboardapp/jQuery-File-Upload/js/jquery.iframe-transport.js"></script>

    <script src="/static/dashboardapp/jQuery-File-Upload/js/jquery.fileupload.js"></script>
    <script src="/static/dashboardapp/jQuery-File-Upload/js/jquery.fileupload-ui.js"></script>
    <script>

        /*jslint unparam: true */
        /*global window, $ */
        $(function () {
            'use strict';
            // Change this to the location of your server-side upload handler:
            var url = "/products/products-import/";
            $('#fileupload').fileupload({
                url: url,
                dataType: 'json',
                done: function (e, data) {
                    $.each(data.result.files, function (index, file) {
                        $('<p/>').text(file.name).appendTo('#files');
                    });
                },
                progressall: function (e, data) {
                    var progress = parseInt(data.loaded / data.total * 100, 10);
                    $('#progress .progress-bar').css(
                        'width',
                        progress + '%'
                    );
                }
            }).prop('disabled', !$.support.fileInput)
                .parent().addClass($.support.fileInput ? undefined : 'disabled');
        });

    </script>

Answer 1

您是否尝试过在$(document).ready(function(){<your_code>});中包装脚本？使代码在文档加载完毕后运行。

选择文件时，JQuery File-Upload不执行任何操作

1 个答案: