向ajax上传添加进度条

Question

I have the following code...

$('#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
        });

It uploads x number of files perfectly with no issues but I'd like to add a progress bar for the total amount of files being uploaded...the user could have anywhere from 0 to no set limit of files chosen for upload. So I'd like it to look at all of the files and display one upload bar for the total amount being uploaded.

Thanks in advance for any help!

Answer 1

For that, there are a lot of jquery plugins but i am using dropzone.js

Jquery Code

$(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 Code

<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>