File Upload with AJAX and Normal Submit simultaneously

Question

I have created a file upload form. I want to upload the data and simultaneously an ajax call that replaces a div in that page with a loading animatoin provided by BOOTMETRO theme. Both File Upload and Ajax are working well separately.! But I want both on one click.

So when I press the submit button single time: 1) AJAX should replace the division in my page 2) Then File upload should start normally.

My HTML form is :

<input name="file" type="file" class="btn btn-info" id="file" /><br/>

<button type="submit" value="Submit" name="submit" onclick="submit()">Submit File</button>
 </form>   

AJAX part

function submit()
    {
var xmlhttp;

    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }


    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
          document.getElementById("fetchLoading").innerHTML=xmlhttp.responseText;
        }
      }

    xmlhttp.open("GET","loading.php" ,true);
            xmlhttp.send();
    xmlhttp.open("GET","upload_process.pgp",true);
    xmlhttp.send();
    }

Please help! or Suggest a technique. (I am using boot metro and I want to load that loading from ajax to a div in my file till the file is uploaded and page is in waiting mode)

Answer 1

You need to send AJAX call first and when you receive the response trigger the file upload programatically.

So your submit button would be like:

<button type="submit" value="Submit" name="submit" onclick="return submit()">Submit File</button>

Your submit function should return false to prevent form submission. And then submit the form inside your AJAX response.

document.myform.submit();

Replace myform with name of your form.