以前用form表单提交参数遇到过只能传单一参数的情况,如果要上传file文件,将表单类型里要写enctype="multipart/form-data",但是一旦表单里还有一些普通参数的话,这个表单就只能提交文件,提交不了剩余普通参数。
当遇到这种复合表单提交的情况时,我的解决方案是:
利用FormData
对象,可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest
发送这个"表单
代码如下:
function submit(){
var xhr = new XMLHttpRequest();
var fd = new FormData();
fd.append('file', $('#file')[0].files[0]); //file类型参数
fd.append('storeId', $scope.store.sId); //普通类型参数
xhr.open('POST', '(提交路径)www.baidu.com');
xhr.send(fd);
xhr.addEventListener('load', uploadComplete, false);
xhr.addEventListener('error', uploadFailed, false);
xhr.addEventListener('abort', uploadCanceled, false);
}
//传输文件开始
function uploadComplete(evt) {
var data = JSON.parse(evt.target.responseText);
alert(data.msg);
}
function uploadFailed(evt) {
alert('There was an error attempting to upload the file.');
}
function uploadCanceled(evt) {
alert('The upload has been canceled by the user or the browser dropped the connection.');
}
//传输文件结束
后台(我们的框架是Spring MVC)控制器接口里的接收参数方式为:
@ApiParam(required = true, name = "storeId", value = "门店Id") @RequestParam Integer storeId,
@ApiParam(required = false, name = "file", value = "门店照片") @RequestParam MultipartFile file