如何在将jquery ajax FormData()与多个文件一起使用时如何在multipart/form-data请求上设置边界 [英] How to set a boundary on a multipart/form-data request while using jquery ajax FormData() with multiple files
问题描述
我有一个HTML表单,该表单需要在单个请求中将3个部分上传到现有的REST API.我似乎找不到有关如何在FormData提交中设置边界的文档.
I have an HTML form that needs to upload 3 parts to an existing REST API in a single request. I can't seem to find documentation on how to set a boundary on a FormData submission.
我尝试遵循此处给出的示例: 如何在jQuery中发送带有Ajax请求的FormData对象?
I've attempted to follow the examples given here: How to send FormData objects with Ajax-requests in jQuery?
但是,当我提交数据时,它会被以下堆栈跟踪拒绝:
However when I submit the data it gets rejected with the following stacktrace:
Caused by: org.apache.commons.fileupload.FileUploadException: the request was rejected because no multipart boundary was found.
如何设置边界?
这是HTML/Javascript:
Here is the 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>
在此先感谢您的帮助!
推荐答案
Musa的响应非常有效.将contentType设置为false确实可以正确提交表单数据.谢谢!
Musa's response worked great. Setting the contentType to false did submit the form data correctly. THANKS!
这是有效的ajax调用:
Here is the ajax call that worked:
$.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);
}
});
我还发现此代码也有效:
I also found that this code also worked:
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);
}
这篇关于如何在将jquery ajax FormData()与多个文件一起使用时如何在multipart/form-data请求上设置边界的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!