如何在多次上传后使用XMLHttpRequest显示确认消息

Question

我有一个系统可以使用XMLHttpRequest上传许多图像，只需在最后它不显示确认消息，即使我已经将确认消息在程序中。

这里是JavaScript：

<script> 

var handleUpload = function(event){ 
     event.preventDefault(); 
     event.stopPropagation(); 

    var fileInput = document.getElementById('file'); 
    var data = new FormData(); 

    for(var i = 0; i < fileInput.files.length; ++i) 
    { 
    data.append('file[]',fileInput.files[i]); 
    } 


    var xhr = new XMLHttpRequest(); 
     xhr.upload.addEventListener('progress',function(event){ 

     if(event.lengthComputable) 
     { 

      var percent = event.loaded/event.total; 
      var progress = document.getElementById('upload_progress'); 

       while (progress.hasChildNones()) 
       { 
         progress.removeChild(progress.firstChild); 
       } 
       progress.appendChild(document.createTextNode(Math.round(percent * 100) + '%')); 
     } 

}); 

      xhr.upload.addEventListener('load',function(event) 
      { 
      document.getElementById('upload_progress').style.display = 'none'; 
      }); 

      xhr.upload.addEventListener('error',function(event) 
      { 

      alert("failed"); 

      }); 


      xhr.open('POST','upload.php'); 
      xhr.setRequestHeader('Cache-Control','no-cache'); 
      xhr.send(data); 

      document.getElementById('upload_progress').style.display = 'block'; 

      document.getElementById("upload_progress").innerHTML=xhr.responseText; 


}; 

      window.addEventListener('load',function(event){ 



      var submit = document.getElementById('submit'); 
      submit.addEventListener('click',handleUpload); 


}); 



</script> 

和HTML

<div id="upload_progress"></div> 


  

<form id="form" action="" method="post" enctype="multipart/form-data"> 
    <input id="file" name="file[]" type="file" multiple /><br> 
    <input type="submit" name="send" id ="submit" value="send"> 
</form> 

最后我的PHP代码，使从upload.php的

<?php 

if(!empty($_FILES['file'])) 
{ 
############################################################### 
    foreach ($_FILES['file']['name'] as $key => $name) 
    { 
    move_uploaded_file($_FILES['file']['tmp_name'][$key],"myfiles/$name"); 


    } 
############################################################### 
echo "God is good"; 

} 

?> 

一切上传休息完美的作品，文件上传但确认信息G od很好不显示。

如何在多重上载后使用XMLHttpRequest显示确认消息？

Answer 1

，首先它没有显示因为document.getElementById('upload_progress').style.display = 'none';

这行代码被设置为不显示所以无论你做什么风格，它不会显示，除非你要么将其更改为 document.getElementById('upload_progress').style.display = 'unset';或者你对此有何评论该行出来，然后将更新成例如上传功能，您整个Ajax代码可能看起来像

<script> 

var handleUpload = function(event){ 
     event.preventDefault(); 
     event.stopPropagation(); 

    var fileInput = document.getElementById('file'); 
    var data = new FormData(); 

    for(var i = 0; i < fileInput.files.length; ++i) 
    { 
    data.append('file[]',fileInput.files[i]); 
    } 


    var xhr = new XMLHttpRequest(); 

     xhr.upload.addEventListener('progress',function(event){ 

     if(event.lengthComputable) 
     { 

      var percent = event.loaded/event.total; 
      var progress = document.getElementById('upload_progress'); 

       while (progress.hasChildNones()) 
       { 
         progress.removeChild(progress.firstChild); 
       } 

       progress.appendChild(document.createTextNode(Math.round(percent * 100) + '%')); 
     } 

}); 

      xhr.upload.addEventListener('load',function(event) 
      { 
      /* 
We comment this line out so as to enable the display of your information from your php file 
      document.getElementById('upload_progress').style.display = 'none'; 
      */ 
      }); 

      xhr.upload.addEventListener('error',function(event) 
      { 

      alert("failed"); 

      }); 


      xhr.open('POST','upload.php'); 
      xhr.setRequestHeader('Cache-Control','no-cache'); 



      /* 

      */ 

      xhr.upload.onprogress = function(e) 
      { 
      if (e.lengthComputable) 
      { 
       var percentComplete = (e.loaded/e.total) * 100; 

       console.log(percentComplete + '% uploaded'); 

       document.getElementById("upload_progress").innerHTML="<img src='images/facebook_style_loader.gif'>" + percentComplete + '% uploaded'; 



      } 
      }; 


      xhr.onload = function() 
      { 
       if (this.status == 200) 
       { 


         if (document.getElementById) 
         { 

             document.getElementById("upload_progress").innerHTML=xhr.responseText; 


         } 



       } 
      }; 



      /* 

      */ 




      xhr.send(data); 

      /* 
      document.getElementById('upload_progress').style.display = 'block'; 
     */ 



}; 

      window.addEventListener('load',function(event){ 



      var submit = document.getElementById('submit'); 
      submit.addEventListener('click',handleUpload); 





      }); 



</script> 

我已经加入并上传处理器和onload处理，以使事情更容易为你

Answer 2

document.getElementById("upload_progress").innerHTML=xhr.responseText;出现在代码立即发送请求后。

在浏览器收到响应之前，您无法读取响应中的数据。

将其移动到您写入的加载事件处理程序中。