javascript - Upload files without refreshing the page by using ajax post -

i have page file-upload.jsp code snippet below:

 <form action="" id="frmupload" name="frmupload" method="post" enctype="multipart/form-data">      <input type="file" id="upload_file" name="upload_file" multiple="" />      <input type="submit" value="update" />  </form> 

i have 2 questions:

1. the moment select files, i.e onchange event of input type file, file(s) should uploaded.

   i have java page receives multipart request parameter , uploads file said location. problem form submission onchange, java file can proceed further operations.

   i googled , went through lot of articles. it's not possible upload files directly via ajax, submit form iframe via ajax/jquery.

   i tried lot of code internet, such this:

   $(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);             }         })     }); }); 

   but not expected results.

2. i need progress bar upload operation.

look @ example using iframe, in php changing action should trick

ajax style file uploading using hidden iframe