使用jQuery Ajax上传文件时,"没有发现多部分边界"异常

Question

这是我的jQuery代码段

$("#uploadForm").submit(function (e) {
    $.ajax({
        url: 'uploadExcel',
        data: $('#uploadForm').serialize(),
        cache: false,
        contentType: 'multipart/form-data',
        processData: false,
        type: 'POST',
        success: function (data) {
            alert(data);
        }
    });

上传文件时,我收到以下错误

org.apache.commons.fileupload.FileUploadException: the request was rejected because no multipart boundary was found
    at org.apache.commons.fileupload.FileUploadBase$FileItemIteratorImpl.<init>(FileUploadBase.java:931)
    at org.apache.commons.fileupload.FileUploadBase.getItemIterator(FileUploadBase.java:331)
    at org.apache.commons.fileupload.FileUploadBase.parseRequest(FileUploadBase.java:349)
    at org.apache.commons.fileupload.servlet.ServletFileUpload.parseRequest(ServletFileUpload.java:126)
    at com.obs.controller.ExcelUploadController.doPost(ExcelUploadController.java:36)
    at javax.servlet.http.HttpServlet.service(HttpServlet.java:641)
    at javax.servlet.http.HttpServlet.service(HttpServlet.java:722)

是什么原因 ？怎么克服？

Answer 1

它XMLHttpRequest不支持文件上传的原因,请参阅此问题:jQuery Ajax文件上传.您在服务器端收到错误,因为您告诉服务器期望多部分上载,但由于没有与其一起发送有效负载(=数据),因此会引发错误.

你需要FormData从XMLHttpRequest2(请注意:只有IE10及以上的所有其他浏览器已经支持了.见我可以使用吗？对于详细的支持信息).

它似乎FormData可以在旧版浏览器中模拟,但我没有亲自尝试过.

使用XMLHttpRequest 2和FormData,您的代码将如下工作:

$("#uploadForm").submit(function (e) {
    e.preventDefault();
    $.ajax({
        url: 'upload.ajax.php',
        data: new FormData($(this)[0]),
        cache: false,
        contentType: false,
        processData: false,
        type: 'POST',
        success: function (data) {
           console.log(data);
        }
    }); 
});