Слушатели событий XMLHTTPRequest не работают?

Question

По какой-то причине мой скрипт для загрузки файлов работает некорректно, и я не знаю, почему:? Сценарий удается отправить файл/с, но я не могу отслеживать изменения прогресса или состояния. Я пытался прокомментировать ненужные биты для отладки, но он все еще не работает.

Если кто-то может указать на мою ошибку, я буду вечно благодарен и дать вам виртуальный печенье

$('#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()». Очень простая ошибка, но это остановило выполнение остальных скриптов. Спасибо Marvin 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));