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

}

?>

一切正常，文件上传但确认消息上帝好不会显示。

如何在多次上传后使用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;会出现在代码中。

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

将其移动到您编写的load事件处理程序中。

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

2 个答案: