使用AJAX和Bootstrap将文件上传到PHP的进度条

我有一个表单，我使用AJAX将图像上传到PHP脚本

这是我的表格

  
 File: 
  
 
 
 ProjectName: 
  
 
 
 
 
   
 
 
 
 
 
 
 
 
 
 

结果div是显示PHP输出的地方（参见AJAX）

进度条是我希望看到我的bootstrap进度条的地方。

这是我的AJAX

 $(function () { $('form#data').submit(function (e){ e.preventDefault(); e.stopImmediatePropagation(); var formData = new FormData($(this)[0]); var file = $('input[type=file]')[0].files[0]; formData.append('upload_file',file); $('.progress').show(); $.ajax({ xhr: function() { var xhr = new window.XMLHttpRequest(); xhr.upload.addEventListener("progress", function(evt) { if (evt.lengthComputable) { var percentComplete = evt.loaded / evt.total; percentComplete = parseInt(percentComplete * 100); $('.progress-bar').css('width',percentComplete+"%"); $('.progress-bar').html(percentComplete+"%"); if (percentComplete === 100) { } } }, false); return xhr; }, type:'POST', url: 'upload.php', data: formData, async:false, cache:false, contentType: false, processData: false, success: function (returndata) { $('#result').html(returndata); } }); return false; }); }); 

现在我得到一个输出，它显示了PHP中回显的数据。 但由于某种原因，我不能让进度条工作。

可能是什么问题？

Answer 1

去除

 async : false; 

解决了它。 但我现在需要了解如何重置栏。

Answer 2

这应该做到这一点

  var progress_bar = $(".progress-bar"); progress_bar.html("0%"); progress_bar.css("width", 0); $(".progress").hide();