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));