XMLHTTPRequest Event Listener funktionieren nicht?

Question

Aus irgendeinem Grund funktioniert mein Skript zum Hochladen von Dateien nicht richtig und ich habe absolut keine Ahnung warum:? Das Skript kann die Datei/en zwar senden, aber ich kann den Fortschritt oder Statusänderungen nicht verfolgen. Ich habe versucht, unnötige Bits zum Debuggen zu kommentieren, aber es funktioniert immer noch nicht.

Wenn jemand meinen Fehler hinweisen werde ich immer dankbar sein und geben Sie ein virtuelles 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

Versuchen Sie, diese:

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(); 
       //} 
      } 
     } 
    }); 

Um dies:

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

Ich habe 'math.round()' anstelle von 'Math.round()' verwendet. Ein sehr einfacher Fehler, aber der Rest des Skripts konnte nicht ausgeführt werden. Danke Marvin Medeiros für den soliden Ratschlag, immer die Fehlerkonsole zu überprüfen

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