是否可以在XMLHttpRequest（）请求中添加Jquery移动加载程序？

Question

  function uploadFile() {

    var fd = new FormData();

          var count = document.getElementById('image').files.length;

          for (var index = 0; index < count; index ++)

          {

                 var file = document.getElementById('image').files[index];

                 fd.append('myFile', file);

          }      
var xhr = new XMLHttpRequest();

        xhr.addEventListener("progress", updateProgress, false);
        xhr.addEventListener("load", uploadComplete, false);
        xhr.addEventListener("error", uploadFailed, false);
        xhr.open("POST", "savetofile.php", false);    

        xhr.send(fd);


 }
      function updateProgress(evt) {

        /* This event is raised when the server send back a response */
               $.mobile.showPageLoadingMsg();
      }

       function uploadComplete(evt) {

        /* This event is raised when the server send back a response */

          alert(evt.target.responseText);
          $.mobile.hidePageLoadingMsg()

      }

      function uploadFailed(evt) {

        alert("There was an error attempting to upload the file.");

      }

I am using Jquert mobile framework and in this XMLHttpRequest I am uploading a file to the server and it takes around 5-6 seconds to complete.I have read that to add and remove the page load(spinner) for jquery mobile just add $.mobile.showPageLoadingMsg() [to load] and $.mobile.hidePageLoadingMsg()[to remove]. Have I placed the function in the wrong positions? or did I make some other mistake ?

Answer 1

Found on solution

function uploadFile() {

//ad this code 
$.mobile.loading('show', {
theme: "a",
text: "yoo",
textonly: true,
textVisible: true
});
//end
    var fd = new FormData();

          var count = document.getElementById('image').files.length;

          for (var index = 0; index < count; index ++)

          {

                 var file = document.getElementById('image').files[index];

                 fd.append('myFile', file);

          }