одиночная и множественная загрузка файла с помощью jquery ajax в Struts 2

Question

как загрузить файл с помощью ajax jquery с показом индикатора выполнения при загрузке в struts2. Я искал все, где ни одна удача не может дать мне идею или какой-нибудь код snipplet thank you.for теперь я использую обычную загрузку в html, как это.

<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 for 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(""); 

      }); 
     }); 

Answer 1

$('#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 a folder to 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>