Java Spring启动上传文件并使用表单提交作为ajax发送其他数据答案

【问题标题】：Java Spring boot upload file and send other data as ajax using form submitJava Spring启动上传文件并使用表单提交作为ajax发送其他数据
【发布时间】：2016-03-30 17:12:29
【问题描述】：

在我的应用程序中，我需要上传一个文件，同时我还需要发送一个参数。这是我的客户端代码。

$.ajax({
                url : "/uploadFile",
                type : "POST",

                data: {file_name:new FormData($("#upload-file-form")[0]),"groupName":"xxx"},
                enctype : 'multipart/form-data',
        //      processData : false,
                contentType : false,
                cache : false,

                success : function(data) {
                    if (data == "success") {
                        // alert ("file uploaded successfully")

                        $(".modal-body").html(
                                "<p>File uploaded Successfully</p>")
                        $('#myModal').modal('show');

                    }
                    if (data == "failure") {
                    alert("failure)
                    }
               }
        }

我的服务器端代码：

public String handleFileUpload(@RequestParam(value="file_name") MultipartFile file ,@RequestParam(value="groupName") String name){


    System.out.println("file");
    return "success";
}

但它说当前请求不是多部分请求。 org.springframework.web.multipart.MultipartException: 当前请求不是多部分请求

我应该如何解析文件名和其他参数？请帮忙

我的 html 表单。

<form id="upload-file-form">
  <label for="upload-file-input">Upload your CSV file:</label>
  <input id="upload-file-input" type="file" name="uploadfile" accept="*" class="align-right" />
  <br>

  <input type="submit"  id ="groupUpload" value="click here to upload the file" class="btn btn-info" >
</form>

【问题讨论】：

标签： java jquery html ajax spring

【解决方案1】：

看到您需要在FormData 中附加值，这是唯一需要传递的内容。因此，您可以像这样附加需要传递的额外值：

var fd = new FormData($("#upload-file-form")[0]);
    fd.append('groupName', 'xxx');

现在在 ajax 中你可以简单地传递这个：

data: fd,
processData : false,  // <----required to upload
contentType : false,  // <----required to upload

FormData().append() doc at MDN.

所以你的代码应该是这样的：

$("#upload-file-form").submit(function(e){
    e.preventDefault();  // <--------stops the form submission
    var fd = new FormData($("#upload-file-form")[0]);
        fd.append('groupName', 'xxx');

    $.ajax({
      url: "/uploadFile",
      type: "POST",
      data: fd,
      enctype: 'multipart/form-data',
      processData: false,
      contentType: false,
      cache: false,
      success: function(data) {
          if (data == "success") {
            $(".modal-body").html("<p>File uploaded Successfully</p>");
            $('#myModal').modal('show');
          } else if (data == "failure") {
            alert("failure)
          }
      }
    });
});

jQuery.ajax() to upload files example @ MDN

【讨论】：

是的，我试过了，这是我得到的错误“出现意外错误（类型=不允许方法，状态=405）。不支持请求方法'GET'”。但我的请求是 POST 类型..
很可能您的表单正在提交，您需要停止表单提交以导航到操作路径。
你的意思是 event.preventDefault() 方法？
是的，我厌倦了那个。“这是我收到的错误 400（错误请求）”。我尝试将 fd 转换为 Json String ，但它再次说它不是多部分请求。服务器端的代码有错误吗？
您可以在您的问题中发布您的表格吗？