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

我發現我的問題

在這裏需要有數據百分比= 「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>