Javascript 引导进度条超过100%

我正在制作一个带有进度条的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>

完成0%
$（“#按钮上载”）。在（'click'，function（）上{
$（“#表单上载”）.remove（）；
$（'body'）。前缀（“”）；
$（'#表单上载输入[name=\'file\']'）。触发器（'click'）；
if（计时器类型！=“未定义”）{
清除间隔（计时器）；
}
计时器=设置间隔（函数（）{
if（$（'#表单上载输入[name=\'file\']'）。val（）！=''）{
清除间隔（计时器）；
setTimeout（函数（）{
$（'.progress.progress bar'）。每个（函数（）{
var me=$（此）；
var perc=me.attr（“数据百分比”）；
无功电流_perc=0；
var progress=setInterval（函数（）{
如果（当前_perc>=perc）{
清除间隔（进度）；
}否则{
当前_perc+=1；
css（'width'，（current_perc）+'%'）；
}
文本（（当前百分比）+'%'）；
}, 50);
});
},300); 
$.ajax({
url:“admin/common/filemanager/upload/？directory=”，
键入：“post”，
数据类型：“json”，
数据：新表单数据（$（'#表单上传'）[0]），
cache:false，
contentType:false，
processData:false，
beforeSend:function（）{
$（'#按钮上载i'）。替换为（''；
$（“#按钮上载”）.prop（'disabled'，true）；
},
完成：函数（）{
$（'#按钮上载i'）。替换为（''；
$（“#按钮上载”）.prop（'disabled'，false）；
},
成功：函数（json）{
if（json['error']）{
警报（json['error']）；
}
if（json['success']）{
//警报（json['success']）；
//$（“#按钮刷新”）.trigger（'click'）；
}
},          
错误：函数（xhr、ajaxOptions、thrownError）{
警报（thrownError+“\r\n”+xhr.statusText+“\r\n”+xhr.responseText）；
}
}); 
}
}, 500);
});

我发现了我的问题

此处需要有数据百分比=“100”

完成0%

剧本

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

$（“#按钮上载”）。在（'click'，function（）上{
$（“#表单上载”）.remove（）；
$（'body'）。前缀（“”）；
$（'#表单上载输入[name=\'file\']'）。触发器（'click'）；
if（计时器类型！=“未定义”）{
清除间隔（计时器）；
}
计时器=设置间隔（函数（）{
if（$（'#表单上载输入[name=\'file\']'）。val（）！=''）{
清除间隔（计时器）；
$.ajax({
url:“admin/common/filemanager/upload/？directory=”，
键入：“post”，
数据类型：“json”，
数据：新表单数据（$（'#表单上传'）[0]），
cache:false，
contentType:false，
processData:false，
beforeSend:function（）{
$（'#按钮上载i'）。替换为（''；
$（“#按钮上载”）.prop（'disabled'，true）；
},
完成：函数（）{
$（'#按钮上载i'）。替换为（''；
$（“#按钮上载”）.prop（'disabled'，false）；
},
成功：函数（json）{
if（json['error']）{
警报（json['error']）；
}
if（json['success']）{
$（'.progress.progress bar'）。每个（函数（）{
var me=$（此）；
var perc=me.attr（“数据百分比”）；
无功电流_perc=0；
var progress=setInterval（函数（）{
如果（当前_perc>=perc）{
清除间隔（进度）；
$（“#按钮刷新”）.trigger（'click'）；
}否则{
当前_perc+=1；
css（'width'，（current_perc）+'%'）；
}
文本（（当前百分比）+'%'）；
}, 50);
});
}
},          
错误：函数（xhr、ajaxOptions、thrownError）{
警报（thrownError+“\r\n”+xhr.statusText+“\r\n”+xhr.responseText）；
}
}); 
}
}, 500);
});

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