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

Question

我会尽量让这个问题变得简单。我想通过使用 JQuery 的 AJAX 提交上传文件和额外的表单数据（但也让它与 ie 7 或 ie 8 兼容，并且也是异步的）

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

1. 已声明 CommonsMultipartResolver
2. 在控制器中写了这个处理方法

@RequestMapping(value="/processfileupload", method = RequestMethod.POST) public @ResponseBody String handleFileUpload(UploadForm data, BindingResult result) throws Exception {

  ....

}

UploadForm 是我绑定到表单的 Spring MVC 表单对象。此外，我将 formObject 绑定在 Spring 的表单标签中，如下所示：enctype="multipart/form-data" .. etc..

就像我说的那样，如果不是通过 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 将表单数据绑定到表单对象的好方法将其连接到 spring然后将其注入控制器。

是否有人对上传文件（相对较小）+ 有一些表单数据的最佳方式有想法，并且能够在 spring mvc 控制器中使用单个端点来处理这个？该解决方案使其与大多数浏览器兼容，但尤其适用于 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) {
            //...
    }

Answer 2

这对我来说就像一个魅力：

$('#formId').submit(function(evt) {

            evt.preventDefault();

            var formData = new FormData(this);

            $.ajax({
            type: 'POST',
            url: "/url",
            data:formData,
            cache:false,
            contentType: false,
            processData: false,
            success: function(data) {
               alert('success');
            },
            error: function(data) {
                alert('failed');
            }
            });
        });

Answer 3

上传文件，使用formdata：

function collectFormData(fields) {
    var formData = new FormData();

    for (var i = 0; i < fields.length; i++) {
        var $item = $(fields[i]);

        if ($item.attr('type') =="file"){
            var file = $('input[type=file]')[0].files[0];
            formData.append( $item.attr('name') , file);

        } else {
            formData.append( $item.attr('name') , $item.val());
        }
    }
    return formData;
}

然后发送：

    var fields = form.find('input, textarea, select');
    var formData = collectFormData(fields);


    $.ajax({
        url: form.attr('action'),
        type: 'POST',
        scriptCharset: "utf-8",
        data: formData,
        async: false,
        cache: false,
        contentType: false,
        processData: false,
        timeout: 600000,
        success: function (response) {
            if (response.status == "SUCCESS"){
                console.log("SUCCESS...");
                $( document ).trigger( "SUCCESS", [ response ] );
            } else if (response.status == "FAIL"){
                console.log("FAIL...");
                clearErrors(form);

                ...
            }
        }
    })

Answer 4

无法使用 AJAX 上传文件。 AJAX 实际上并不将表单发布到服务器，它以 POST 或 GET 请求的形式将选定的数据发送到服务器。由于 javascript 无法从用户机器中获取文件并将其发送到服务器，因此使用 AJAX 是不可能的。您必须求助于常规的旧表单提交。

点击此链接：http://viralpatel.net/blogs/ajax-style-file-uploading-using-hidden-iframe/ 举个例子