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

我会尽量把这个问题简单化。我想通过使用JQuery的AJAX提交上传一个包含其他表单数据的文件（但也要使其与IE7或IE8兼容，并且也是异步的）

如果提交不是通过JQuery进行的AJAX提交，那么这个过程可以正常工作。即我做了以下工作：

声明的CommonsMultipartResolver

在中，控制器编写了此处理程序方法

@RequestMapping（value=“/processfileupload”，method=RequestMethod.POST） public@ResponseBody字符串handleFileUpload（UploadForm数据，BindingResult）引发异常{

  ....

}

其中UploadForm是我绑定到表单的SpringMVC表单对象。另外，我在Spring的表单标记中绑定了formObject，如：enctype=“multipart/formdata”。。等等

正如我所说的，如果不是通过JQuery通过Ajax调用来实现，那么它将非常有效。一旦我尝试将其设置为Ajax调用，该文件总是空的

下面是通过JQuery进行的Ajax调用

函数submitFileUploadViajax（）{

}

我怀疑问题可能是：数据：$（“#文件_上传_表单”）.serialize（）

我已经阅读了一些针对那些有类似问题的人使用formData对象的建议解决方案，但我已经阅读过这将与IE7或IE8不兼容，这是真的吗

我还阅读了JQuery文件上传插件将起作用（）的内容，但我不确定是否能够用spring将表单数据绑定到表单对象，然后将其注入控制器的好方法将其连接到spring中

有没有人对上传文件（相对较小）+有一些表单数据，并且能够在SpringMVC控制器中用一个端点处理这些数据的最佳方式有自己的想法？该解决方案与大多数浏览器兼容，但特别适用于IE7或IE8（这是在这些浏览器中工作的要求）

非常感谢

• 罗科

---

无法使用AJAX上传文件。AJAX实际上并没有将表单发布到服务器，而是以post或GET请求的形式将所选数据发送到服务器。由于javascript无法从用户机器中获取文件并将其发送到服务器，因此使用AJAX是不可能的。你必须使用常规的旧表格提交
请点击此链接：

---

例如，可以使用AJAX上传文件： 试试这个
客户端：HTML

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

服务器端：JAVA

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

---

要上载文件，请使用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;
}

---

这对我来说很有魅力：

$('#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');
            }
            });
        });

---

好吧，我自己想出来的。我使用了JQuery表单插件，我已经读到它将与IE以及大多数其他浏览器兼容。它甚至可以与SpringMVC配合使用，所以我非常高兴！嗨，罗科。您是如何使用jQuery表单插件的？我的问题和你在帖子中提到的一样。但正如你所说，你已经解决了它，我很感兴趣你是如何做到的。请允许我提出你的解决方案好吗？thanksHow是否传递额外的表单参数并映射到“modelAttribute”？

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

                ...
            }
        }
    })

$('#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');
            }
            });
        });