So legen Sie eine Grenze für eine mehrteilige/Formulardatenanforderung fest, während jquery ajax verwendet wird FormData() mit mehreren Dateien

Question

Ich habe ein HTML-Formular, das 3 Teile in eine bestehende REST-API in einer einzigen Anfrage hochladen muss. Ich kann anscheinend keine Dokumentation darüber finden, wie eine Grenze für eine FormData-Einreichung festgelegt wird.

Ich habe versucht, hier gegeben, um die Beispiele zu folgen: How to send FormData objects with Ajax-requests in jQuery?

Allerdings, wenn ich die Daten eintragen mit folgendem Stacktrace wird abgelehnt:

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

Wie kann ich eine Grenze gesetzt? Hier

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

Hier ist die Form ist:

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

Vielen Dank im Voraus für jede Hilfe!

Answer 1

Musas Antwort funktionierte gut. Wenn Sie den contentType auf "false" festlegen, werden die Formulardaten ordnungsgemäß übermittelt. VIELEN DANK! Hier

ist die Ajax-Aufruf, die funktioniert:

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

Ich fand auch, dass dieser Code auch gearbeitet:

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