上传带百分比的 MultipartFile

Question

我上传了几个文件，我想显示上传百分比。在 javascript 我有这个代码：

function uploadFunction(fileType){
    //CSRF attribute for spring security
    var token = $("meta[name='_csrf']").attr("content");
    var header = $("meta[name='_csrf_header']").attr("content");

    var formData = new FormData();
    var fileControl = document.getElementById(fileType);
    var length = fileControl.files.length;
    for(var i = 0; i< length; i++){ 
        formData.append('file[]',fileControl.files[i]); 
    } 
    formData.append('idFleet', selectedFleet);
    formData.append('idCar', $("#selectedCar").val());
    if(fileType!='dat')
        formData.append('initialKm', 0);
    else
        formData.append('initialKm', $("#initialKm").val());
    return jQuery.ajax({
        url : 'upload',
        type: 'POST',
        contentType: false,
        processData: false,
        data:formData,
        beforeSend:function(xhr) {
            xhr.setRequestHeader(header, token);
            waitingModal.showPleaseWait();
        },  
        success: function(data,status,xhr){
            //No exception occurred
            if (data.status){   
                //Also the field are right(for e.g. form value)
                if(data.success){
                    //Store information if file is datatable
                    if (fileType=='datatable')
                        $("#datatablePath").val(data.result[0]);
                    notifyMessage(fileType + " has been uploaded!", 'success');
                    uploadResult=true;
                }
                else{
                    //code if there are some error into form for example
                }
            } else {
                notifyMessage(data.result, 'error');
                $('#acquisitionWizard').bootstrapWizard('show',2);//show
                uploadResult=false;
            }
        },
        error: function(xhr,status,e){
            window.location.href = "/DART/500";
        }
    }).complete(function() {
        //add timeout because otherwise user could see a too fast waiting modal
        setTimeout(function(){
            waitingModal.hidePleaseWait();
        }, 1000);
    });

}

在Spring我有

@Override
@RequestMapping(value = { "/upload"}, method = RequestMethod.POST)
public @ResponseBody Response uploadFiles(Principal principal, @RequestParam("file[]") MultipartFile[] file, @RequestParam("idFleet") Integer idFleet, @RequestParam("idCar") Integer idCar, @RequestParam("initialKm") Integer initialKm) {
    try {
        ArrayList<String> path=fleetAcquisitionServices.uploadFiles(principal.getName(), file, idFleet, idCar, initialKm);
        return new Response(true,true,path,null);
    } catch (FileEmptyException e) {
        ....
    }
}

并使用 MultipartFile transferTo 方法上传文件。我阅读了一些指南，但都是针对 servelet 的，是否可以在我的代码中集成百分比进度？我在网页和来自客户端的 REST 调用中都使用了这段代码，使用这种方法我没有收到关于内存的错误。

Answer 1

这就是我的代码现在显示进度条的方式：

function uploadFunction(fileType){
    //CSRF attribute for spring security
    var token = $("meta[name='_csrf']").attr("content");
    var header = $("meta[name='_csrf_header']").attr("content");

    var formData = new FormData();
    var fileControl = document.getElementById(fileType);
    var length = fileControl.files.length;
    for(var i = 0; i< length; i++){ 
        formData.append('file[]',fileControl.files[i]); 
    } 
    formData.append('idFleet', selectedFleet);
    formData.append('idCar', $("#selectedCar").val());
    if(fileType!='dat')
        formData.append('initialKm', 0);
    else
        formData.append('initialKm', $("#initialKm").val());
    return jQuery.ajax({
        url : 'upload',
        type: 'POST',
        timeout: 0,//unlimited timeout
        contentType: false,
        processData: false,
        data:formData,
        //Catch upload progress
        xhr: function()
          {
            var xhr = new window.XMLHttpRequest();
            //Upload progress
            xhr.upload.addEventListener("progress", function(evt){
              if (evt.lengthComputable) {
                var progress = Math.round((evt.loaded / evt.total) * 100) + '%';
                //Update progress bar and text
                document.getElementById("fileProgressBar").style.width = progress;
                document.getElementById("percentualFile").innerHTML = progress;
              }
            }, false);
            return xhr;
          },
        beforeSend:function(xhr) {
            xhr.setRequestHeader(header, token);
            waitingFile.showPleaseWait();
        },  
        success: function(data,status,xhr){
            //No exception occurred
            if (data.status){   
                //Also the field are right(for e.g. form value)
                if(data.success){
                    //Store information if file is datatable
                    if (fileType=='datatable')
                        $("#datatablePath").val(data.result[0]);
                    notifyMessage(fileType + " has been uploaded!", 'success');
                    uploadResult=true;
                }
                else{
                    //code if there are some error into form for example
                }
            } else {
                notifyMessage(data.result, 'error');
                $('#acquisitionWizard').bootstrapWizard('show',2);//show
                uploadResult=false;
            }
        },
        error: function(xhr,status,e){
            window.location.href = "/DART/500";
        }
    }).complete(function() {
        //add timeout because otherwise user could see a too fast waiting modal
        setTimeout(function(){
            //Reset to 0 progress bar and text
            document.getElementById("fileProgressBar").style.width = "0%";
            document.getElementById("percentualFile").innerHTML = "0%";
            waitingFile.hidePleaseWait();
        }, 1000);
    });

}

我介绍了 xhr: function() @Roberto 在他的回答中的建议。可以对下载进度状态使用类似的函数

//Download progress
xhr.addEventListener("progress", function(evt){
  if (evt.lengthComputable) {
    var percentComplete = evt.loaded / evt.total;
    //Do something with download progress
    console.log(percentComplete);
  }
}, false);

上传带百分比的 MultipartFile

Upload MultipartFile with percentage

javascript

ajax

upload

jquery

spring