Spring mvc ajax文件上傳導致415（不支持的媒體類型）

Question

我正在使用jquery ajax方法嘗試fileupload。 但是它導致客戶端415（不支持的媒體類型）錯誤。但是使用非ajax請求我的代碼工作正常。

我的控制器代碼。

@RequestMapping(value = "/imageUpload", headers = "content-type=multipart/*", method = RequestMethod.POST, consumes = "application/json")
public @ResponseBody
String uploadImage( @RequestParam("fileData") MultipartFile multipartFile, HttpServletRequest request )
{
       // statements
}

我的觀點頁面

<form id="uploadForm" action="imageUpload" method="post" enctype="multipart/form-data">
    <div>
        <input type="file" id="fileData" name="fileData" />
        <input type="submit" id="submitContent"  value="upload" />
    </div>
 </form>

和ajax電話。

$("#uploadForm").submit(function (e) {
     e.preventDefault();
                var $form = $("#uploadForm");                 
                $.ajax({
                  type: $form.attr('method'),
                  url: $form.attr('action'),                 
                  data: $form.serialize(),
                  dataType : 'json',
                  enctype: 'multipart/form-data',
                  processData: false,                     
                  success: function(msg){
                        $( "#editor" ).append(msg);
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) { 
                        alert("Status: " + XMLHttpRequest);   alert("Status: " + textStatus); alert("Error: " + errorThrown); 
                    }
                  });
 });

我嘗試了幾個設置contentType：false 。 所以如果需要，請建議我任何改變。

Answer 1

使用FormData對象查看此發送文件

來自file元素的數據未被序列化，使用new FormData()來初始化數據，然后添加包含data元素的表單元素。 這段代碼可行

    $("#uploadForm").submit(function(e) {
    e.preventDefault();
    var $form = $("#uploadForm");
    var fd = new FormData($(this)[0]);
    console.info(fd);
    $.ajax({
        type : 'POST',
        url : $form.attr('action'),
        data : fd,
        cache : false,
        processData : false,
        contentType : false,
        success : function(response) {
            console.info(response);
        },
        error : function(XMLHttpRequest, textStatus, errorThrown) {
            console.info("Status: " + XMLHttpRequest);
            alert("Status: " + textStatus);
            alert("Error: " + errorThrown);
        }
    });
});

要添加其他表單變量，請使用fd.append(...)