Cách đặt ranh giới trên yêu cầu nhiều dữ liệu/biểu mẫu trong khi sử dụng jquery ajax FormData() với nhiều tệp

Question

Tôi có biểu mẫu HTML cần tải 3 phần vào API REST hiện có trong một yêu cầu. Tôi dường như không thể tìm thấy tài liệu về cách thiết lập một ranh giới trên một đệ trình FormData.

Tôi đã cố gắng làm theo các ví dụ đưa ra ở đây: How to send FormData objects with Ajax-requests in jQuery?

Tuy nhiên khi tôi gửi dữ liệu nó bị từ chối với stacktrace sau:

Caused by: org.apache.commons.fileupload.FileUploadException: the request was rejected because no multipart boundary was found. 

Làm thế nào tôi có thể thiết lập một ranh giới?

Dưới đây là HTML/Javascript:

<script type="text/javascript"> 
    function handleSubmit() { 


     var jsonString = "{" + 
       "\"userId\":\"" + document.formSubmit.userId.value + "\"" + 
       ",\"locale\":\"" + document.formSubmit.locale.value + "\"" + 
       "}"; 

     var data = new FormData(); 
     data.append('Json',jsonString); 
     data.append('frontImage', document.formSubmit.frontImage.files[0]); 
     data.append('backImage', document.formSubmit.backImage.files[0]); 

     document.getElementById("sent").innerHTML = jsonString; 
     document.getElementById("results").innerHTML = ""; 
     $.ajax({ 
        url:getFileSubmitUrl(), 
        data:data, 
        cache: false, 
        processData: false, 
        contentType: 'multipart/form-data', 
        type:'POST', 
        success:function (data, status, req) { 
         handleResults(req); 
        }, 
        error:function (req, status, error) { 
         handleResults(req); 
        } 
       }); 
    } 

</script> 

Đây là Mẫu:

<form name="formSubmit" action="#"> 
    userId: <input id="userId" name="userId" value=""/><br/> 
    locale: <input name="locale" value="en_US"/><br/> 
    front Image: <input type="file" name="frontImage"/><br/> 
    back Image: <input type="file" name="backImage"/><br/> 
    <input type="button" onclick="handleSubmit();" value="Submit"/> 
</form> 

Cảm ơn trước sự giúp đỡ nào!

Answer 1

Phản hồi của Musa hoạt động rất tốt. Đặt contentType thành false đã gửi dữ liệu biểu mẫu chính xác. CẢM ƠN!

Đây là cuộc gọi ajax mà làm việc:

$.ajax({ 
    url:getFileSubmitUrl(), 
    data:data, 
    cache:false, 
    processData:false, 
    contentType:false, 
    type:'POST', 
    success:function (data, status, req) { 
     handleResults(req); 
    }, 
    error:function (req, status, error) { 
     handleResults(req); 
    } 
}); 

Tôi cũng thấy rằng mã này cũng làm việc:

var oReq = new XMLHttpRequest(); 
     oReq.open("POST", getFileSubmitUrl()); 
     oReq.addEventListener("error", transferComplete); 
     oReq.addEventListener("load", transferComplete); 
     oReq.addEventListener("abort", transferComplete); 
     oReq.send(data); 
    } 
    function transferComplete(evt) { 
     handleResults(evt.target); 
    }