Come impostare un limite su una richiesta multipart/form durante l'utilizzo di jquery ajax FormData() con più file

Question

Ho un modulo HTML che deve caricare 3 parti su un'API REST esistente in una singola richiesta. Non riesco a trovare documentazione su come impostare un limite per l'invio di FormData.

ho tentato di seguire gli esempi qui riportati: How to send FormData objects with Ajax-requests in jQuery?

Tuttavia quando presento i dati che viene respinto con il seguente stacktrace:

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

Come posso impostare un confine?

Ecco il codice 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> 

Qui è la forma:

<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> 

Grazie in anticipo per qualsiasi aiuto!

Answer 1

La risposta di Musa funzionava benissimo. L'impostazione di contentType su false ha inviato correttamente i dati del modulo. GRAZIE!

Ecco la chiamata AJAX che ha funzionato:

$.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); 
    } 
}); 

Ho anche scoperto che questo codice ha lavorato anche:

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); 
    }