Bootstrap 进度条超过 100%

Question

我正在制作一个带有进度条的 codeingiter 文件上传脚本。在我的 java 脚本函数中，当我单击要上传的图像时，它会触发进度条以设定的时间间隔开始。

但由于某种原因，当它达到 100% 时，它仍然继续超过 100%。

问题：在我的脚本中，一旦进度条达到 100%，我该如何强制我的进度条停止？

<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="progress progress-striped active">
<div class="progress-bar" role="progressbar" aria-valuenow="0"  aria-valuemin="0" aria-valuemax="100" style="width: 0%">
<span class="sr-only">0% Complete</span>
</div>
</div>
<div class="image"></div>
</div>
</div>

<script type="text/javascript">
$('#button-upload').on('click', function() {
    $('#form-upload').remove();

    $('body').prepend('<form enctype="multipart/form-data" id="form-upload" style="display: none;"><input type="file" name="file" value="" /></form>');

    $('#form-upload input[name=\'file\']').trigger('click');

    if (typeof timer != 'undefined') {
        clearInterval(timer);
    }

    timer = setInterval(function() {

        if ($('#form-upload input[name=\'file\']').val() != '') {

            clearInterval(timer);

            setTimeout(function(){

            $('.progress .progress-bar').each(function() {

            var me = $(this);
            var perc = me.attr("data-percentage");

            var current_perc = 0;

            var progress = setInterval(function() {
            if (current_perc>=perc) {
                clearInterval(progress);
            } else {
                current_perc +=1;
                me.css('width', (current_perc)+'%');
            }

            me.text((current_perc) +' %');

            }, 50);

            });

            },300); 

            $.ajax({
                url: 'admin/common/filemanager/upload/?directory=<?php echo $directory; ?>',
                type: 'post',       
                dataType: 'json',
                data: new FormData($('#form-upload')[0]),
                cache: false,
                contentType: false,
                processData: false,     
                beforeSend: function() {
                    $('#button-upload i').replaceWith('<i class="fa fa-circle-o-notch fa-spin"></i>');
                    $('#button-upload').prop('disabled', true);
                },
                complete: function() {
                    $('#button-upload i').replaceWith('<i class="fa fa-upload"></i>');
                    $('#button-upload').prop('disabled', false);
                },
                success: function(json) {
                    if (json['error']) {
                        alert(json['error']);
                    }

                    if (json['success']) {
                        //alert(json['success']);

                        //$('#button-refresh').trigger('click');
                    }
                },          
                error: function(xhr, ajaxOptions, thrownError) {
                    alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
                }
            }); 
        }
    }, 500);
});
</script>

Answer 1

我发现了我的问题

这里需要有data-percentage="100"

<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="progress progress-striped active">
<div class="progress-bar" role="progressbar" data-percentage="100"  aria-valuenow="0"  aria-valuemin="0" aria-valuemax="100" style="width: 0%">
<span class="sr-only">0% Complete</span>
</div>
</div>
<div class="image"></div>
</div>
</div>

脚本

<script type="text/javascript">
$('#button-upload').on('click', function() {
    $('#form-upload').remove();

    $('body').prepend('<form enctype="multipart/form-data" id="form-upload" style="display: none;"><input type="file" name="file" value="" /></form>');

    $('#form-upload input[name=\'file\']').trigger('click');

    if (typeof timer != 'undefined') {
        clearInterval(timer);
    }

    timer = setInterval(function() {

        if ($('#form-upload input[name=\'file\']').val() != '') {

            clearInterval(timer);

            $.ajax({
                url: 'admin/common/filemanager/upload/?directory=<?php echo $directory; ?>',
                type: 'post',       
                dataType: 'json',
                data: new FormData($('#form-upload')[0]),
                cache: false,
                contentType: false,
                processData: false,     
                beforeSend: function() {
                    $('#button-upload i').replaceWith('<i class="fa fa-circle-o-notch fa-spin"></i>');
                    $('#button-upload').prop('disabled', true);

                },
                complete: function() {
                    $('#button-upload i').replaceWith('<i class="fa fa-upload"></i>');
                    $('#button-upload').prop('disabled', false);
                },
                success: function(json) {
                    if (json['error']) {
                        alert(json['error']);
                    }

                    if (json['success']) {

                    $('.progress .progress-bar').each(function() {

                    var me = $(this);
                    var perc = me.attr("data-percentage");

                    var current_perc = 0;

                    var progress = setInterval(function() {

                    if (current_perc>=perc) {

                        clearInterval(progress);


                        $('#button-refresh').trigger('click');


                    } else {
                        current_perc +=1;
                        me.css('width', (current_perc)+'%');


                    }

                    me.text((current_perc) +' %');

                    }, 50);

                    });

                    }
                },          
                error: function(xhr, ajaxOptions, thrownError) {
                    alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
                }
            }); 
        }
    }, 500);
});
</script>