上传时的 Ajax 进度条答案

【问题标题】：Ajax Progress bar on upload上传时的 Ajax 进度条
【发布时间】：2015-09-13 18:48:38
【问题描述】：

我一直在尝试使用 AJAX 实现一个进度条，并且我从代码中得到零输出。我想知道是否有人可以让我知道我可能会错过什么。

   $("#uploadSubmitBtn").click(function(){
    var formData = new FormData($("#mediaUploadForm")[0]);
    var usersFiles=$("#uploadBtn")[0].files;
    formData.append('usersUpload', usersFiles);
    $.ajax({

        //for our progress bar...
         xhr: function() {
         //var xhr = new window.XMLHttpRequest();
             var xhr = $.ajaxSettings.xhr();
             xhr.upload.addEventListener("progress", function(evt) {
                 alert("attempting progress calculation..");
               if (evt.lengthComputable) {
                  var percentComplete = Math.round( (evt.loaded * 100/ evt.total) );
                  console.log("percent completed = " + percentComplete);
               }
             },  false);
             return xhr;
         },//end xhr function

        //other stuff
        url : "upload",
        type : 'post',
        data : formData,
        async : false,
        cache: false,
        processData: false,
        contentType: false,
        success : function(resp){
            $('#msgBoxText').text(resp);
            $('#msgBox').slideDown("slow");
       },
    });
});//end of submitting media

【问题讨论】：

标签： javascript python ajax html progress-bar

【解决方案1】：

所以看起来将 async 值设置为 true 解决了这个问题。所以代码 sn-p 现在看起来像 $.ajax({ url : "upload", type : 'post', data : formData, async : true, cache: true, processData: false, contentType: false,

感谢那些至少看过的人:)

【讨论】：