XMLHTTPRequest事件偵聽器不工作？

Question

出於某種原因，我的文件上傳腳本工作不正常，我完全不知道爲什麼：？該腳本設法發送文件，但我無法跟蹤進度或狀態更改。我試圖評論出不必要的位進行調試，但它仍然不起作用。

如果有人能指出我的錯誤，我將永遠感激，給你一個虛擬的cookie

$('#submit').click(function(e){ 
      e.preventDefault(); 
      $('#progressContainer').slideDown(10); 
      var f = document.getElementById('file'), 
       pb = document.getElementById('pb'), 
       pt = document.getElementById('pt'); 

      app.uploader({ 
       files:f, 
       progressBar:pb, 
       progressText:pt, 
       processor:'scripts/php/upload.php', 

       finished: function(){ 
        $('#pt').html("Upload complete"); 
       }, 
       error: function(){ 
        $('#pt').html("Upload Error, please try again"); 
       } 
      }); 
     }); 

var app = app || {}; 

(function(o){ 
    "use strict" 

    var ajax, getFormData, setProgress; 

    ajax = function(data){ 
     var xmlhttp = new XMLHttpRequest(), uploaded; 
     xmlhttp.addEventListener('readystatechange', function(){ 
      if(this.readystate === 4){ 
       if(this.status === 200){ 
        //uploaded = JSON.parse(this.response); 
        //if(typeof o.options.finished === 'function'){ 
         o.options.finished(); 
        //} 
       } else { 
        //if(typeof o.options.error === 'function'){ 
         o.options.error(); 
        //} 
       } 
      } 
     }); 
     xmlhttp.upload.addEventListener('progress', function(event){ 
      var percent; 
      //if(event.lengthComputable === true){ 
       percent = math.round(event.loaded/event.total * 100); 
       setProgress(percent); 
       alert(percent) 
      //} 
     }); 
     xmlhttp.open('POST', o.options.processor); 
     xmlhttp.send(data); 
    } 
    getFormData = function(src){ 
     var data = new FormData(), i; 
     for(i=0;i<src.length;i++){ 
      data.append('file[]',src[i]); 
     } 
     data.append('formSent',true); 
     return data; 
    } 
    setProgress = function(val){ 
     $('#pb').animate({width:val+"%"},10); 
     $('#pt').html(val+"%"); 
    } 

    o.uploader = function(opt){ 
     o.options = opt; 
     if(o.options.files !== undefined){ 
      ajax(getFormData(o.options.files.files)); 
     } 
    } 
}(app)); 

Answer 1

嘗試改變這一點：

xmlhttp.addEventListener('readystatechange', function(){ 
     if(this.readystate === 4){ 
      if(this.status === 200){ 
       //uploaded = JSON.parse(this.response); 
       //if(typeof o.options.finished === 'function'){ 
        o.options.finished(); 
       //} 
      } else { 
       //if(typeof o.options.error === 'function'){ 
        o.options.error(); 
       //} 
      } 
     } 
    }); 

要這樣：

xmlhttp.onreadystatechange = function() { 
     if(xmlhttp.readystate === 4){ 
      if(xmlhttp.status === 200){ 
       //uploaded = JSON.parse(this.response); 
       //if(typeof o.options.finished === 'function'){ 
        o.options.finished(); 
       //} 
      } else { 
       //if(typeof o.options.error === 'function'){ 
        o.options.error(); 
       //} 
      } 
     } 
    }); 

Answer 2

我使用'math.round（）'而不是'Math.round（）'。一個非常簡單的錯誤，但它阻止了執行腳本的其餘部分。謝謝馬文Medeiros總是檢查錯誤控制檯的聲音建議

var app = app || {}; 

(function(o){ 
    "use strict" 

    var ajax, getFormData, setProgress; 

    ajax = function(data){ 
     var xmlhttp = new XMLHttpRequest(), uploaded; 
     xmlhttp.addEventListener('onreadystatechange', function(){ 
      if(xmlhttp.readystate === 4){ 
       if(xmlhttp.status === 200){ 
        uploaded = JSON.parse(this.response); 
        if(typeof o.options.finished === 'function'){ 
        o.options.finished(); 
        } 
       } else { 
        if(typeof o.options.error === 'function'){ 
        o.options.error(); 
        } 
       } 
      } 
     }); 
     xmlhttp.upload.addEventListener('progress', function(event){ 
      var percent; 
      if(event.lengthComputable === true){ 
       percent = Math.round(event.loaded/event.total * 100); 
       setProgress(percent); 
      } 
     }); 
     xmlhttp.open('POST', o.options.processor); 
     xmlhttp.send(data); 
    } 
    getFormData = function(src){ 
     var data = new FormData(), i; 
     for(i=0;i<src.length;i++){ 
      data.append('file[]',src[i]); 
     } 
     data.append('formSent',true); 
     return data; 
    } 
    setProgress = function(val){ 
     $('#pb').animate({width:val+"%"},10); 
     $('#pt').html(val+"%"); 
    } 

    o.uploader = function(opt){ 
     o.options = opt; 
     if(o.options.files !== undefined){ 
      ajax(getFormData(o.options.files.files)); 
     } 
    } 
}(app));