向ajax上传添加进度条

Question

我有以下代码...

$('#submitForm, #error').fadeOut("slow", function() {
            $('#submission_div').html("<div id='pleaseWait'>Please Wait...</div> ");
        });
        var formData = $('#comm_planner').submit(function(e){
            return;
        });

        var formData = new FormData(formData[0]);

        $.ajax({
            url: 'process.php',
            type: 'post',
            data: formData,
            success: function(data) {
                $('#main').fadeOut('slow', function() {
                    $(this).html(data).fadeIn('fast');
                });
            },
            error: function(jqXHR, textStatus, errorThrown) {
                $('#main').fadeOut('slow', function() {
                    $(this).html(error).fadeIn('fast');
                });
            }, 
            cache: false,
            contentType: false,
            processData: false
        });

它完美地上传了x个文件，没有问题，但是我想为正在上传的文件总数添加一个进度条...用户可以选择从0到无限制的文件上传限制。因此，我希望它可以查看所有文件并显示一个上传栏，用于显示上传的总数量。

在此先感谢您的帮助！

Answer 1

为此，有很多jquery插件，但是我正在使用dropzone.js

jQuery代码

$(function() {

    var bar = $('.bar');
    var percent = $('.percent');
    var status = $('#statusToGet');

    $('form').ajaxForm({
        beforeSend: function() {
            status.empty();
            var percentVal = '0%';
            bar.width(percentVal);
            percent.html(percentVal);
        },
        uploadProgress: function(event, position, total, percentComplete) {
            var percentVal = percentComplete + '%';
            bar.width(percentVal);
            percent.html(percentVal);
        },
        complete: function(xhr) {
            status.html(xhr.responseText);
        }
    });
}); 

HTML代码

<form action="file-echo2.php" method="post" enctype="multipart/form-data">
    <input type="file" name="myfile"><br>
    <input type="submit" value="Upload File to Server">
</form>

<div class="progress">
    <div class="bar"></div >
    <div class="percent">0%</div >
</div>

<div id="statusToGet"></div>