如何设置的边界上的多部分/格式数据请求,而使用多个文件的jquery AJAX FORMDATA()

2019-08-02 08:42发布

我有一个需要上传3份到现有的REST API在单个请求中的HTML形式。 我似乎无法找到如何设置一个边界上的FORMDATA提交文件。

我已经尝试按照此处给出的例子: 如何发送FORMDATA对象与jQuery的Ajax的请求?

然而,当我提出它就会用下面的堆栈跟踪拒绝数据:

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

如何设置一个边界?

下面是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>

这里是表格:

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

在此先感谢您的帮助!

Answer 1:

穆萨的响应伟大的工作。 设置的contentType为假做正确提交表单数据。 谢谢!

这里是工作的Ajax调用:

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

我还发现,这种代码也工作:

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


文章来源: How to set a boundary on a multipart/form-data request while using jquery ajax FormData() with multiple files