上传文件+表单数据+ Spring MVC的+ JQuery的 [英] Upload file + Form Data + Spring MVC + JQuery

问题描述

我会尽力使这个问题简单，我可以。我要上传文件的与的通过使用JQuery的AJAX提交的另一种形式的数据（也为它与IE 7和IE 8和异步也兼容）

I'll try to make this question as simple as I can. I want to upload a file with additional form data via an AJAX submission using JQuery (but also for it to be compatible with ie 7 or ie 8, and asynchronous too)

如果没有提交是通过JQuery的AJAX的提交，程序工作正常。也就是说我做了以下内容：

Without the submit being an AJAX submission via JQuery, the process works fine. Namely I did the following:

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

@RequestMapping（值=/ processfileupload，方法= RequestMethod.POST）         公共@ResponseBody字符串handleFileUpload（UploadForm数据，BindingResult结果）抛出异常{

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

  ....

}

在哪里UploadForm是我绑定的形式Spring MVC的表单对象。另外，我束缚formObject在Spring的表单标签，像这样：ENCTYPE =多部分/表单数据。等等。

Where UploadForm is a Spring MVC form object which I bound to the form. Also, I bound the formObject in Spring's form tag like so: enctype="multipart/form-data" .. etc..

就像我说的，完美的作品，如果它是通过通过JQuery Ajax调用没有这样做。有一次，我试图使它Ajax调用，该文件是始终为空。

Like I said, works perfectly if it is NOT done via an Ajax call via JQuery. Once I tried to make it an Ajax call, the file is always null.

下面是通过JQuery Ajax调用

Here is the Ajax call via JQuery

功能submitFileUploadViaAjax（）{

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

    });

}

我怀疑问题可能是：数据：$（＃file_upload_form）序列化（）

I suspect the problem may be: data: $("#file_upload_form").serialize(),

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

I have read some suggested solutions for those with similar problems to use a formData object but have read that this won't be compatible with IE 7 or IE 8, is this true?

我头也可以参考JQuery的文件上传插件将工作（的https://github.com/blueimp/jQuery-File-Upload/wiki/How-to-submit-additional-form-data)但我不知道如果我能连线到这一点春天春天的伟大的表单数据绑定到表单对象，然后只将其注入到一个控制器的方式。

I head also read the JQuery file upload plug-in would work ( https://github.com/blueimp/jQuery-File-Upload/wiki/How-to-submit-additional-form-data) but I'm not sure if I'd be able to wire this into spring with spring's great way of binding form data to a form object and then just injecting it into a controller.

有没有人有他们对上传的文件（比较小）+有某种形式的数据，并能够在一个Spring MVC的控制器，一个端点处理的最佳方式是什么想法？而且该解决方案，使其与大多数浏览器兼容，尤其是将与IE 7和IE 8（这是它在这些浏览器工作的要求。）

Does anyone have their thoughts on the best way to upload a file (relatively small) + have some form data, and be able to process this with a single endpoint in a spring mvc controller? And the solution so that it is compatible with most browsers, but especially will work with ie 7 or ie 8 (it's a requirement it work in those browsers.)

感谢一大堆！

• 罗科

推荐答案

使用AJAX的文件上传是可能的： 试试这个

File uploading using AJAX is possible: try this

客户端：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) {
            //...
    }

这篇关于上传文件+表单数据+ Spring MVC的+ JQuery的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！