title: file upload with progress bar
body: <p>I am writing the code from scratch using Ajax, jsp and servlets to show progress bar for the file being uploaded by the client. I have coded a simple form, and Ajax call back function in javascript of the client. I am using multipart/form-data onSubmit on the form to upload the file to a webservlet. I am able to upload the file to the server and write it to the desired location byte-wise, so that I also have the actual number of bytes being written. </p>
  
  <p>My problem is this. </p>
  
  <p>Now, I want to use ajax to get the bytes being written inside the while loop and display on the the same page. When I submit my form, the page redirects to the webservlet. How do I stay on the same page and use Ajax to display the returned progress (bytes being uploaded)?</p>
  
  <pre><code>//Code inside My POST method of webservlet
  //write to file byte by byte (count stored in "totalBytesWritten") 
              while(totalBytesWritten &lt; formDataLength){
                  fileOuputStream.write(dataBytes, totalBytesWritten ,1);
                  totalBytesWritten ++;
  
              }
  </code></pre>
  
  <p>I wish to return the "totalBytesWritten" value to the client page via AJAX from within the while loop since this is the current progress of the file being written. But how do I do this from within the while loop? When I submit the form, the page gets redirected to other page, but I want to display the progress on the same page.</p>
  
  <p>code I am using to return data to client from servlet: </p>
  
  <pre><code>response.getOutputStream().write(totalBytesWritten); 
  response.getOutputStream().flush();
  response.getOutputStream().close();
  </code></pre>
  
  <p>My ajax call back function:</p>
  
  <pre><code>function ajaxCallProgressBar(){
          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 &amp;&amp; xmlhttp.status==200)
                      {   
                          document.getElementById( "actualCount" ).innerHTML=xmlhttp.responseText();; 
                  }
                  else {
                        document.getElementById("actualCount").innerHTML="readystate error!";
                   }
  
  xmlhttp.open("GET","progressBar",true);
  xmlhttp.send();
  } //end of function
  </code></pre>
  
  <p>The actual form is:</p>
  
  <pre><code>&lt;form action="./progressBar"  enctype="multipart/form-data" method="post"      
  onsubmit="ajaxCallProgressBar()"&gt;
  
  &lt;p&gt;
  Type some text (if you like):&lt;br&gt;
  &lt;input type="text" name="textline" size="30"&gt;
  &lt;/p&gt;
  &lt;p&gt;
  Please specify a file, or a set of files:&lt;br&gt;
  &lt;input type="file" name="datafile" size="40"&gt;
   &lt;/p&gt;  
  &lt;div&gt;
  &lt;input type="submit" value="Send"&gt;
  &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>How do I display the progressbar on the same page? </p>