在 Struts 2 中使用 jquery ajax 上传单个和多个文件

Question

如何使用 ajax jquery 上传文件，并在 struts2 中上传时显示进度条我搜索了所有没有运气的地方，任何人都不能给我想法或一些代码snipplet，谢谢。现在我正在像这样在 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>