Question

伙计们试图为每个文件上传获取进度条和中止选项，对于单个文件选择它工作正常文件保存在数据库中，当我选择多个文件时保存的第一个选定文件，而不是所有文件我需要每个文件上传的进度条和中止选项

以下是我所采取的参考文献，他们已经完成了一个文件选择的进度，但我期待多次使用中止选项

https://www.boraji.com/spring-4-mvc-jquery-ajax-file-upload-example-with-progress-bar

$(function() {
    $('button[type=submit]').click(function(e) {
        e.preventDefault();
        //Disable submit button
        $(this).prop('disabled',true);


        var form = document.forms[0];
        var formData = new FormData(form);

        // Ajax call for file uploaling
        var ajaxReq = $.ajax({
            url : 'fileUpload',
            type : 'POST',
            data : formData,
            cache : false,
            contentType : false,
            processData : false,
            xhr: function(){
                //Get XmlHttpRequest object
                 var xhr = $.ajaxSettings.xhr() ;

                //Set onprogress event handler 
                 xhr.upload.onprogress = function(event){
                    var perc = Math.round((event.loaded / event.total) * 100);
                    $('#progressBar').text(perc + '%');
                    $('#progressBar').css('width',perc + '%');
                 };
                 return xhr ;
            },
            beforeSend: function( xhr ) {
                //Reset alert message and progress bar
                $('#alertMsg').text('');
                $('#progressBar').text('');
                $('#progressBar').css('width','0%');
            }
        });

        // Called on success of file upload
        ajaxReq.done(function(msg) {
            $('#alertMsg').text(msg);
            $('input[type=file]').val('');
            $('button[type=submit]').prop('disabled',false);
        });

        // Called on failure of file upload
        ajaxReq.fail(function(jqXHR) {
            $('#alertMsg').text(jqXHR.responseText+'('+jqXHR.status+
                    ' - '+jqXHR.statusText+')');
            $('button[type=submit]').prop('disabled',false);
        });
    });
});

形式

    <form action="fileUpload" method="post" enctype="multipart/form-data">
          <div class="form-group">
            <label>Select File</label> <input class="form-control" type="file" name="file" multiple>
          </div>
          <div class="form-group">
            <button class="btn btn-primary" type="submit">Upload</button>
          </div>
        </form>

 <!-- Bootstrap Progress bar -->
    <div class="progress">
      <div id="progressBar" class="progress-bar progress-bar-success" role="progressbar"
        aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">0%</div>
    </div>

Answer 1

我认为您需要输入类型如下：

JSP代码：

<input name="media[]" type="file" id="xmlTemplate" multiple>

Javascript代码：

var data = new FormData();     
jQuery.each($('input[name^="media"]')[0].files, function(i, file) {
    data.append("file", file);
});

var json = '{' + .... + ']}';//Some JSON I was also passing alongwith files

data.append('estimateInfo', new Blob([json], {
                        type: "application/json"
                    }));

$.ajax({
        type : "POST",
        processData: false,
        dataType: 'json',
        data: data,
        cache: false,
        contentType: false,
        url: 'createEstimates',
        success: function(result) {

        },
        error: function(result) {

        }
      });

控制器代码：

@RequestMapping(value = "/createEstimates", method = RequestMethod.POST, consumes = { "multipart/form-data" })
    @ResponseBody
    public EstimateResponse createEstimates(HttpServletRequest request,
            @RequestPart("estimateInfo") EstimateInfo estimateInfo, @RequestPart("file") MultipartFile... files) {
}

每个文件上传都需要进度条和中止选项

1 个答案: