Question

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

如果没有通过JQuery提交AJAX，则该过程正常。即我做了以下事情：

宣布CommonsMultipartResolver

在控制器中写了这个处理程序方法

@RequestMapping（value =“/ processfileupload”，method = RequestMethod.POST） public @ResponseBody String handleFileUpload（UploadForm data，BindingResult result）抛出异常{

....

}

其中UploadForm是我绑定到表单的Spring MVC表单对象。另外，我在Spring的表单标签中绑定了formObject，如下所示：enctype =“multipart / form-data”..等等。

就像我说的，如果不是通过JQuery通过Ajax调用完成的，那么效果很好。一旦我尝试将其作为Ajax调用，该文件始终为null。

这是通过JQuery的Ajax调用

function 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将表单数据绑定到a的好方法将其连接到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/ 例如

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

4 个答案: