Добавить индикатор выполнения для загрузки 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>