php - Is it possible to add Jquery mobile loader on XMLHttpRequest() request?

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

97

Answer

Solution:

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

          }      

People are also looking for solutions to the problem: html - How to get php row values?

Source

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

Write quick answer

Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.

Similar questions

Find the answer in similar questions on our website.