jquery - 上传文件+表单数据+Spring MVC + JQuery

Question

我会尽力让这个问题变得简单。我想使用 JQuery 通过 AJAX 提交上传带有附加表单数据的文件(而且还兼容 ie 7 或 ie 8，并且也是异步的)

如果提交不是通过 JQuery 进行 AJAX 提交，则该过程可以正常工作。也就是说我做了以下事情:

1. 声明了 CommonsMultipartResolver
2. 在 Controller 中编写了这个处理程序方法

@RequestMapping(value="/processfileupload", method = RequestMethod.POST) 公共(public)@ResponseBody字符串handleFileUpload(UploadForm数据，BindingResult结果)抛出异常{

  ....

}

其中UploadForm是我绑定(bind)到表单的Spring MVC表单对象。另外，我将 formObject 绑定(bind)在 Spring 的表单标签中，如下所示: enctype="multipart/form-data".. 等等 ..

就像我说的，如果不是通过 JQuery 的 Ajax 调用来完成，则可以完美地工作。一旦我尝试将其设为 Ajax 调用，该文件始终为空。

这是通过 JQuery 进行的 Ajax 调用

函数submitFileUploadViaAjax() {

   $.ajax({

        url: "processfileupload",
        data: $("#file_upload_form").serialize(),
        type: "POST", 
        processData: false,
        contentType: false,

        success: function(data) {
                $(response).html(data);
        },

        error: function (xhr, ajaxOptions, thrownError) {
                if (xhr.readyState == 0 || xhr.status == 0) {
                    // not really an error
                    return;
                } else {
                    alert("XHR Status = "+xhr.status);
                    alert("Thrown Error = "+thrownError);
                    alert("AjaxOptions = "+ajaxOptions)
                }
          }

    });

}

我怀疑问题可能是: data: $("#file_upload_form").serialize(),

我已经阅读了一些建议的解决方案，供那些有类似问题的人使用 formData 对象，但我读到这与 IE 7 或 IE 8 不兼容，这是真的吗？

我还读到 JQuery 文件上传插件可以工作( https://github.com/blueimp/jQuery-File-Upload/wiki/How-to-submit-additional-form-data )，但我不确定是否能够使用 spring 将表单数据绑定(bind)到表单对象的好方法将其连接到 spring 中然后将其注入(inject) Controller 。

是否有人对上传文件(相对较小)+一些表单数据的最佳方式有自己的想法，并且能够使用 spring mvc Controller 中的单个端点来处理它？该解决方案使其与大多数浏览器兼容，但尤其适用于 ie 7 或 ie 8(这是在这些浏览器中工作的要求。)

非常感谢!

• 罗科

Answer 1

可以使用 AJAX 上传文件: 试试这个

客户端:HTML

<input type="file" name="file" id="fileLoader" /> 
<input type="button" id="fileSubmit" value="Upload"/>

客户端:JS

var files = [];
$(document)
        .on(
                "change",
                "#fileLoader",
                function(event) {
                 files=event.target.files;
                })

$(document)
        .on(
                "click",
                "#fileSubmit",
                function() {
                processUpload();
                })

function processUpload()
          {
              var oMyForm = new FormData();
              oMyForm.append("file", files[0]);
             $
                .ajax({dataType : 'json',
                    url : "the url",
                    data : oMyForm,
                    type : "POST",
                    enctype: 'multipart/form-data',
                    processData: false, 
                    contentType:false,
                    success : function(result) {
                        //...;
                    },
                    error : function(result){
                        //...;
                    }
                });
          }

服务器端:JAVA

@RequestMapping(method = RequestMethod.POST, value = "the url")
    @ResponseBody
    public void uploadFile(@RequestParam("file") MultipartFile multipartFile) {
            //...
    }