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);
    });

}

在春天我有

@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

这就是我的代码现在如何显示进度条：

//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);

我介绍了xhr：function（）@Roberto在答案中的建议。可以对下载进度状态使用类似的功能

function find_value_and_highlight_term(template, value, term) {
  var templateLc = template.toLowerCase();
  var strpos = templateLc.indexOf(term);
  if(strpos) {
    var strlen = term.length;
    var templateStart = template.slice(0,strpos);
    var templateEnd = template.slice(strpos+strlen);
    return templateStart+"<b>"+term+"</b>"+templateEnd;
  } else {
    return template;
  }
}

使用百分比上传MultipartFile

1 个答案: