将 jquery ajax FormData() 与多个文件一起使用时，如何在多部分/表单数据请求上设置边界
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13240664/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set a boundary on a multipart/form-data request while using jquery ajax FormData() with multiple files
提问by jason
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.
我有一个 HTML 表单，需要在单个请求中将 3 个部分上传到现有的 REST API。我似乎找不到有关如何在 FormData 提交上设置边界的文档。
I've attempted to follow the examples given here: How to send FormData objects with Ajax-requests in jQuery?
我试图按照此处给出的示例进行操作： 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.
How can I set a boundary?
如何设置边界？
Here is the HTML/Javascript:
这是 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>
Here is the Form:
这是表格：
<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>
Thanks in advance for any help!
在此先感谢您的帮助！
采纳答案by jason
Musa's response worked great. Setting the contentType to false did submit the form data correctly. THANKS!
穆萨的回应非常奏效。将 contentType 设置为 false 确实正确提交了表单数据。谢谢！
Here is the ajax call that worked:
这是有效的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);
}
});
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);
}
