Отображение диалога после загрузки файла (Ajax/PHP/Javascript)

Question

Итак, я использую Javascript с AJAX для отправки данных формы в файл PHP. Как только вы загрузите файл на сервер, я хочу, чтобы диалоговое окно показало, что оно выполнено успешно, а затем перезагружается. У меня есть диалоговое окно, но оно появится, даже если есть ошибка. Я, хотя создание флага решит это, но это не так. Мне нужно дождаться, когда прогресс будет на 100% завершен, поэтому я помещаю код в функцию прогресса. Вот мой код:

function uploadImage(){ 
var done = false; 
    var xr = new XMLHttpRequest(); 
     xr.upload.addEventListener("progress", progressHandler, false); 
     xr.addEventListener("error", errorHandler, false); 
     xr.addEventListener("abort", abortHandler, false); 
     xr.open("POST", "php/uploadImage.php", true); 

     xr.onreadystatechange = function(){ 
      if(xr.readyState == 4 && xr.status == 200){ 
       var response = xr.responseText; 
       if(response=="success"){ 
        done=true; 
       }else{ 
        _("errorMessage").innerHTML = response; 
       } 
      } 
     } 

     xr.send(formdata); 

     function progressHandler(event){ 
      var percent = (event.loaded/event.total) * 100; 
      _("imageUploadBar").style.width = Math.round(percent) + "%"; 

      if((percent == 100) && (done)){ 
       completeHandler(); 
      } 
     } 

     function completeHandler(){ 
      bootbox.dialog({ 
       message: "Image upload is completed.", 
       title: "Upload Success", 
       buttons: {    
        success: { 
         label: "Continue", 
         className: "btn btn-success", 
         callback: function() { 
          location.reload(); 
         } 
        } 

       } 
      }); 
     } 
} 

Таким образом, вы можете видеть, что если загрузить файл обратного успеха, набор сделан, чтобы быть правдой, и если процент равен 100, то огня, но это не сработает функцию completeHandler(). Любые идеи, почему и как обойти это?

Answer 1

Я считаю, что это, как правило, срабатывает от onreadystatechange, но добавление второй переменной должно позаботиться о вашей проблеме.

var done = false; 
var uploaded = false; 
var xr = new XMLHttpRequest(); 
xr.upload.addEventListener("progress", progressHandler, false); 
xr.addEventListener("error", errorHandler, false); 
xr.addEventListener("abort", abortHandler, false); 
xr.open("POST", "php/uploadImage.php", true); 

xr.onreadystatechange = function(){ 
    if(xr.readyState == 4 && xr.status == 200){ 
     var response = xr.responseText; 
     if(response=="success"){ 
      done=true; 
      if(uploaded && done){ 
       completeHandler(); 
      } 
     }else{ 
      _("errorMessage").innerHTML = response; 
     } 
    } 
} 

xr.send(formdata); 

function progressHandler(event){ 
    var percent = (event.loaded/event.total) * 100; 
    _("imageUploadBar").style.width = Math.round(percent) + "%"; 

    if(percent == 100) uploaded = true; 

    if(uploaded && done){ 
     completeHandler(); 
    } 
} 

function completeHandler(){ 
    bootbox.dialog({ 
     message: "Image upload is completed.", 
     title: "Upload Success", 
     buttons: {    
      success: { 
       label: "Continue", 
       className: "btn btn-success", 
       callback: function() { 
        location.reload(); 
       } 
      } 

     } 
    }); 
}