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

Question

I have a system that enables an upload of many images with XMLHttpRequest that work perfectly only that at the end it does not display a confirmation message even though i have place the confirmation message in the program.

Here is the 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>

And the rest of the 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>

And finally my php code that enables the upload from 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";

}

?>

Everything works perfectly, the files are uploaded However the confirmation message God is good does not display.

How to display a confirmation message with XMLHttpRequest after a multiple Upload ?

Answer 1

First of all it is not displaying because of document.getElementById('upload_progress').style.display = 'none';

That line of code is setting the style as not be displayed so no matter what you do, it is not going to display except you either change it to document.getElementById('upload_progress').style.display = 'unset'; or you comment that line out and then move the updater into an uploader function for example you entire ajax code might look like

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

I have added and Upload handler and Onload handler to make things easier for you