title: Upload files without refreshing the page by using ajax post
body: <p>I have a page file-upload.jsp with the code snippet below:</p>
  
  <pre class="lang-html prettyprint-override"><code> &lt;form action="" id="frmupload" name="frmupload" method="post" enctype="multipart/form-data"&gt;
       &lt;input type="file" id="upload_file" name="upload_file" multiple="" /&gt;
       &lt;input type="submit" value="Update" /&gt;
   &lt;/form&gt;
  </code></pre>
  
  <p>I have 2 questions:</p>
  
  <ol>
  <li><p>The moment I select some files, i.e the <code>onchange</code> event of the <code>input</code> type <code>file</code>, the file(s) should get uploaded.</p>
  
  <p>I have a Java page that receives multipart request parameter and uploads the file to the said location. My problem is the form submission <code>onchange</code>, so that the Java file can proceed with further operations.</p>
  
  <p>I googled and went through lot of articles. Some say it's not possible to upload files directly via Ajax, some say submit the form to an iframe via Ajax/jQuery.</p>
  
  <p>I tried a lot of code from internet, such as this:</p>
  
  <pre class="lang-js prettyprint-override"><code>$(document).ready(function(){
      $('upload_file').change(function(){
          var data = new FormData();
          data.append('file', $(this[0].files[0]));
          $.ajax({
              url: 'photo.jsp',
              type: 'post',
              contentType: attr('enctype', "multipart/form-data"),
              data: data,
              success: function(data){
                  alert(data);
              }
          })
      });
  });
  </code></pre>
  
  <p>but could not get the expected results.</p></li>
  <li><p>I also need a progress bar for the upload operation.</p></li>
  </ol>