jquery - por - multipart/form-data ajax

Cómo establecer un límite en una solicitud multipart/form-data mientras se usa jquery ajax FormData() con varios archivos

Question

Tengo un formulario HTML que necesita subir 3 partes a una API REST existente en una sola solicitud. Parece que no puedo encontrar documentación sobre cómo establecer un límite en un envío de FormData.

He intentado seguir los ejemplos que se dan aquí: ¿Cómo enviar objetos FormData con solicitudes Ajax en jQuery?

Sin embargo, cuando envío los datos, se rechazan con el siguiente seguimiento de pila:

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

¿Cómo puedo establecer un límite?

Aquí está el 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>

Aquí está el formulario:

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

¡Gracias de antemano por cualquier ayuda!

Answer 1

La respuesta de Musa funcionó muy bien. Al establecer el tipo de contenido en falso, se enviaron los datos del formulario correctamente. ¡GRACIAS!

Aquí está la llamada ajax que funcionó:

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

También encontré que este código también funcionó:

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