javascript - single and multiple File upload using jquery ajax in Struts 2 -

how upload file using ajax jquery showing progress bar while uploading in struts2 searched every no luck can 1 give me idea or code snipplet thank you.for using normal upload in html this.

<a id="addfile-link" href="#" title="add file"><img src="htdocs/images/add_file.png" style="width: 20px; height: 20px; border: 0"></a>                   <form id="form" name="form" target="viewfileupload" method="post"                 action="fileupload.do" enctype="multipart/form-data">                 <input type="file" name="upload" id="file" class="fileupload" multiple>                   </form>     $("#addfile-link").click(function() { var initialfolderid = document.getelementbyid('currentfolder').value;             //added converting first time page load null or empty value validation in servelet engine             if (initialfolderid == null || initialfolderid == "") {                 initialfolderid = 0;             }              document.getelementbyid('selectedfolder').value = initialfolderid;             $("#file").click();             var uploadelement = document.getelementbyid("file");             $('#file').change(function() {                  uploadelement.form.submit();                  //sleep(100)                 settimeout(function() {openfolder(document.getelementbyid('currentfolder').value);getrecentactivity(0);}, 3000);                 $('#activites').html("");               });         }); 

$('#addfile-link').bind("click",function(){         var folderid          folderid=document.getelementbyid('currentfolder').value;         document.getelementbyid('selectedfolder').value = folderid;          if( folderid==" " || folderid==0){             $('#input').prop('disabled', true);             showfilemsg();             //alert("kindly select folder upload files");          }         else{              $('#input').prop('disabled', false);         $('#fileupload').fileupload({          xhrfields: {withcredentials: true},             url: "fileupload.do?",             type:"post",             datatype : "json",             autoupload: true,            formdata:{name:'folderid',value:folderid},            disableimagepreview:true,            filescontainer: $('table.files'),            uploadtemplateid: null,            downloadtemplateid: null,            uploadtemplate: function (o) {                var rows = $();                $.each(o.files, function (index, file) {                    var row = $('<tr class="template-upload fade">' +                        '<td><span class="preview"></span></td>' +                        '<td><p class="name"></p>' +                        '<div class="error"></div>' +                        '</td>' +                        '<td><p class="size"></p>' +                        '<div class="progress"></div>' +                        '</td>' +                        '<td>' +                        (!index && !o.options.autoupload ?                            '<button class="start" disabled>start</button>' : '') +                        (!index ? '<button class="cancel">cancel</button>' : '') +                        '</td>' +                        '</tr>');                    row.find('.name').text(file.name);                    row.find('.size').text(o.formatfilesize(file.size));                    if (file.error) {                        row.find('.error').text(file.error);                    }                    rows = rows.add(row);                });                return rows;            },            downloadtemplate: function (o) {                var rows = $();                $.each(o.files, function (index, file) {                    var row = $('<tr class="template-download fade">' +                        '<td><span class="preview"></span></td>' +                        '<td><p class="name"></p>' +                        (file.error ? '<div class="error"></div>' : '') +                        '</td>' +                        '<td><span class="size"></span></td>' +                        '<td><button class="delete">delete</button></td>' +                        '</tr>');                    row.find('.size').text(o.formatfilesize(file.size));                    if (file.error) {                        row.find('.name').text(file.name);                        row.find('.error').text(file.error);                    } else {                        row.find('.name').append($('<a></a>').text(file.name));                        if (file.thumbnailurl) {                            row.find('.preview').append(                                $('<a></a>').append(                                    $('<img>').prop('src', file.thumbnailurl)                                )                            );                        }                        row.find('a')                            .attr('data-gallery', '')                            .prop('href', file.url);                        row.find('button.delete')                            .attr('data-type', file.delete_type)                            .attr('data-url', file.delete_url);                    }                    rows = rows.add(row);                });                return rows;            },            always:function (e, data) {                $.each( function () {                    $(this).removeclass('fileupload-processing');                });             },            done: function (e, data) {                $('.template-upload').remove();                $.each(data.files, function (index, file) {                    openfolder(folderid);                });             },            error: function (jqxhr, textstatus, errorthrown) {                alert("jqxhr: " + jqxhr.status + "\ntextstatus: " + textstatus + "\nerrorthrown: " + errorthrown);            }                 /*add: function (e, data) {             $('body').append('<p class="upl">uploading...</p>')             data.submit();         },*/     })          }      });     <form id="fileupload" on action="fileupload.do" method="post" enctype="multipart/form-data">                                         <input id="input" type="file" name="upload" multiple style="cursor: pointer;  display: none">                                         <im:hidden name="selectedfolder" id="selectedfolder" value="1" />                                          <span class="fileupload-process"></span>                                  <div class="col-lg-5 fileupload-progress fade">                                      <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">                                        <div class="progress-bar progress-bar-info" style="width:0%;"></div>                                     </div>                                        <div class="progress-extended">&nbsp;</div>                                  </div>                   <table role="presentation" class="table table-striped"><tbody class="files"></tbody></table>               </form>