在文件上傳過程中未調用處理程序函數使用表單數據和jQuery（1.10.2）Ajax

Question

我創建了一個消息發送界面以及單個文件上傳（幾個帶有一個文件上傳按鈕的文本字段和文本區域）。 我想在發送消息時顯示進度條。

我寫了一個js函數來使用jquery ajax發送消息，它工作正常。

現在我試圖附加進度事件。對於我修改使用谷歌和堆棧溢出我的jQuery Ajax代碼如下：

var form = new FormData(document.getElementById('frm_send_msg')); 
    var file = document.getElementById('attachment').files[0]; 
    if (file) { 
     form.append('attachment', file); 
    } 
    $.ajax({ 
     url: '/send_msg.php', 
     type: 'POST', 
     async: false, 
     cache: false, 
     dataType: 'json', 
     contentType: false, 
     processData: false, 
     data: form, 
     xhr: function() { // custom xhr 
      var myXhr = $.ajaxSettings.xhr(); 
      if (myXhr.upload) { // check if upload property exists 
       myXhr.upload.addEventListener('progress', progressHandlingFunction, false); // for handling the progress of the upload 
      } 
      return myXhr; 
     }, 
     success: function(data) { 
      //code to hide sending interface 
     }, 
     complete: function() { //  
      alert("complete"); 
     }, 
     error: function() { 

      alert("ERROR in sending message"); 
     } 
    }) 

我寫一個函數來處理進度事件：

function progressHandlingFunction(evt) { 
    console.log('updating fun called'); 
    // evt is an ProgressEvent. 
    if (evt.lengthComputable) { 
     console.log('updating'); 
     var percentLoaded = Math.round((evt.loaded/evt.total) * 100); 
     // Increase the progress bar length. 
     $(".progress > div").css({ 
      width: percentLoaded + '%' 
     }); 

    } else { 
     console.log('not updating'); 
    } 
} 

但是我沒有得到任何一個控制檯日誌條目的from progressHandlingFunction函數，也沒有我的.progress div顯示任何更改。

需要幫助解決這個請！

這就是控制檯中鉻

>XHR finished loading: "http://localhost/send_msg.php". 
    send jquery.js:6 
    x.extend.ajax jquery.js:6 
    send_msg custom_scripts.js:402 
    onclick 

顯示還有一件事我要在這裏提到：

我的形式在裏面嘰嘰喳喳bootstrap3.0模式？

Answer 1

我不確定它會不會起作用，但是修改你的ajax代碼並嘗試從ajax中刪除成功：function（）{}。

$.ajax({ 
     url: '/send_msg.php', 
     type: 'POST', 
     async: false, 
     cache: false, 
     dataType: 'json', 
     contentType: false, 
     processData: false, 
     data: form, 
     xhr: function() { // custom xhr 
      var myXhr = $.ajaxSettings.xhr(); 
      if (myXhr.upload) { // check if upload property exists 
       myXhr.upload.addEventListener('progress', progressHandlingFunction, false); // for handling the progress of the upload 
      } 
      return myXhr; 
     }, 
     complete: function() { //  
//code to hide sending interface 
      alert("complete"); 
     }, 
     error: function() { 

      alert("ERROR in sending message"); 
     } 
    }); 

希望它可以幫助你。