使用AJAX和引导程序将文件上载到PHP的进度条

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

这是我的表格

<form action ="upload.php" method = "POST" enctype = "multipart/form-data" class = "form-horizontal" name="formData" id="data">
        <!--File Upload-->
            <div class = "form-group">
                <label class="control-label col-sm-1" for = "file">File:</label>    
                    <div class="col-sm-9">
                        <input type = "file" name = "image_file" id = "image_file"  class = "form-control" accept="image/*" onChange="autoPull(this.value)";>
                    </div>
            </div>
            <div class = "form-group">
                <label class="control-label col-sm-1" for = "project_name">ProjectName:</label>
                    <div class="col-sm-9">
                        <input type = "text" name ="project_name" id = "project_name" class = "form-control" placeholder="Enter Project Name"  value = "" required>
                    </div>
            </div>
            <div class = "button">
                <div class="form-group">
                    <div class="col-sm-offset-1 col-sm-6">
                        <input type="submit" name = "submit" class="btn btn-primary" value = "Submit" id="file_upload">
                        <input type="reset" name = "submit" class="btn btn-default" value = "Reset">
                    </div>
                </div>
            </div>
        </form>
        <br/>
            <div class="progress" style="display:none;">
              <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%;">

              </div>
            </div>
        <div id = "result"></div>

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

可能是什么问题？

删除

async : false;

解决了。但我现在需要看看如何重置该条。

这应该可以

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

---

您是否确实尝试过发出异步请求，即删除

async:false

？@adeneo感谢您的成功@因此，当我第一次提交进度条时，进度条达到100%。对于后续文件，它不会重新加载，而是保持在100。我这里缺了什么？你不能把宽度调回去吗zero@adeneo谢谢，我工作了。

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