4

我会尽量让这个问题变得简单。我想通过使用 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" .. 等等。

就像我说的，如果它不是通过 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（这是在这些浏览器中工作的要求。）

非常感谢！

  • 罗科
4

4 回答 4

9

可以使用 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) {
            //...
    }
于 2015-02-27T10:07:57.347 回答
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');
            }
            });
        });
于 2016-08-17T16:05:55.783 回答
0

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

                ...
            }
        }
    })
于 2016-05-03T13:43:19.087 回答
-3

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

按照此链接：http: //viralpatel.net/blogs/ajax-style-file-uploading-using-hidden-iframe/ 为例

于 2013-10-15T06:56:58.023 回答