javascript - Spring MVC文件上传，通常进度条是由Javascript完成的？

Question

初学者警告......

这似乎是一个非常奇怪的问题......但我一直在研究如何使用 Spring MVC 框架进行文件上传。

我发现了很多使用 apache common-io 依赖项的示例。 https://commons.apache.org/proper/commons-fileupload/using.html

当我进一步研究实现 ProgressListener 时。我发现了这个...... http://howtodoinjava.com/spring/spring-mvc/spring-mvc-multi-file-upload-with-progress-bar/

现在，我一直认为进度条百分比是由服务器计算文件上传了多少。所以我认为我们需要在 Controller 中实现一个计算，它返回的字节数如正在传输的字节的百分比...或写入目录的字节数。

但是从第二个链接示例来看，Spring Controller 似乎不执行任何计算，只是将文件写入目标。

所以问题是......

1. 文件传输实际上是如何工作的...我只能从示例中假设 Spring Controller 会等到它收到完整的文件后再写入服务器目录？这就是为什么为了显示进度条，我们使用 JavaScript 来计算有多少文件已传输到服务器但尚未写入？

2. 需要一些帮助来理解 JavaScript。

从 uploadNext 方法调用 onUploadProgress 方法，但不传入任何参数

xhr.upload.addEventListener("progress", onUploadProgress, false);

但是如果你看一下 onUploadProgress 方法，它需要一个参数 (e) 这个 e 是什么？

function onUploadProgress(e) {
    if (e.lengthComputable) {
        var percentComplete = parseInt((e.loaded + totalUploaded) * 100 / totalFileLength);
        var bar = document.getElementById('bar');
        bar.style.width = percentComplete + '%';
        bar.innerHTML = percentComplete + ' % complete';
    } else {
        debug('unable to compute');
    }
}

非常感谢您帮助我瘦身

Answer 1

当您在表单中定义 enctype:"multipart/form-data"时，服务器端的 MutlipartResolver 会解析多部分请求。

<bean id="multipartResolver"
class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
  <property name="defaultEncoding"><value>utf-8</value></property>
</bean>

Js方法:

function uploadFile(thisVar,fileName){ 

        var msg='',params="fileName="+fileName;

        var fileContent = new FormData();
        fileContent.append(fileName,thisVar.files[0]);

        $.ajax({
            type: "POST",
            enctype:"multipart/form-data",
            url: "addCoupons?"+params,
            data: fileContent,
            processData: false,
            contentType: false,
            beforeSend: function() { 
                $(thisVar).parent().toggleClass('fa-upload fa-refresh fa-spin');//.click('false');
            },
            complete:function(){ 
                $(thisVar).parent().toggleClass('fa-upload fa-refresh fa-spin');//.click('true');
            }
        }).done(function(responseText) { 
            //alert('on success '+responseText);

        }).fail(function(){ 
          alert("Error");
       });
    }

在 Controller 上:

 @RequestMapping(value="/addCoupons")
 public  @ResponseBody String insertData(MultipartHttpServletRequest request) //@RequestParam("file") MultipartFile file
       {

                CommonsMultipartFile file = (CommonsMultipartFile) 
                      request.getFile(request.getParameter("fileName"));
        }