Question

我正在使用此插件上传文件： https://github.com/hashmode/cakephp-jquery-file-upload

上传有效，但进度条始终在文件上传之前完成。在使用此插件之前，我尝试使用blueimp uploader standalone。我遇到了同样的问题。

知道如何让进度条正常工作吗？

我正在通过代理进行测试。我可以看到代理仍在等待响应。然而进度条是100％。

这是我在视图中使用的代码：

<?php echo $this->JqueryFileUpload->loadCss(); ?>
<?php echo $this->JqueryFileUpload->loadScripts(); ?>

<div class="row">
    <div class="col-md-12">
        <div class="card ">
            <div class="header">
                <h4 class="title">Import Session Data</h4>
                <p class="category">category text</p>
            </div>
            <div class="content">
                <!-- The fileinput-button span is used to style the file input field as button -->
                <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>
            </div>
            <div class="footer">
                <hr>
                <div class="stats">
                    <i class="fa fa-history"></i> footer
                </div>
            </div>

        </div>
    </div>
</div>
<script>
/*jslint unparam: true */
/*global window, $ */
$(function () {
    'use strict';
    // Change this to the location of your server-side upload handler:
    var url = '/sessions/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 + '%'
            );
        },
        success: function(response) {
            var json = $.parseJSON(response);
            alert(json['message']);
        }
    }).prop('disabled', !$.support.fileInput)
        .parent().addClass($.support.fileInput ? undefined : 'disabled');
});
</script>

在我的控制器中我有：

public function import() 
{
    if ($this->request->is('post')) {
        $options = array(
            'max_file_size' => 2048000,
            'max_number_of_files' => 10,
            'access_control_allow_methods' => array(
                'POST'
            ),
            'accept_file_types' => '/\.(png|jpg)$/i',
            'upload_dir' =>  '../uploads/workbench/', //WWW_ROOT . 'files' . DS . 'uploads' . DS,
            'upload_url' => '/files/uploads/',
            'print_response' => false
        );

        $result = $this->JqueryFileUpload->upload($options);

        print_r($result);
        die();
    }
}

Answer 1

解决。这与我使用代理有关。当我删除代理时它工作正常。不知道为什么会发生这种情况。

Blueimp文件上传插件，进度条在文件上传之前完成

1 个答案: