1、html
前台略显粗糙,一个文件上传的input框,一个提交按钮
<form id="attachments1" enctype="multipart/form-data" class="form-horizontal" novalidate="novalidate">
<div class='form-body'>
<div class='form-group'>
<label class="control-label col-md-1">附件上传:</label>
<div id="attachmentInputs1" class="col-md-3">
<input name="attachment1" type="file" id = "file1" class="form-control input-attachment" multiple="multiple"/>
<button id="file3" type="button" ng-click="check1()" ng-class="button-primary"
class="button-primary"> {{sysFileInfoCommon.ocr}}
</button>
</div>
</div>
</div>
</form>
2、js
ajax提交成功后的属于我自己的业务代码,大家可自动屏蔽
$scope.check1 = function () {
var doc = document.getElementById('file1');
for(var i=0;i<doc.files.length;i++){
var name = doc.files[i].name;
var hz = name.substring(name.lastIndexOf(".")+1);
if(hz!="pdf" && hz!="jpg"){
GillionMsg.alert($scope.sysFileInfoCommon.tips, "请选择正确的文件类型!", null);
return false;
}
}
var formData = new FormData();
//注入 name=file
var files = $("#attachmentInputs1 input[type='file']");
for (var i = 0; i < files[0].files.length; i++) {
formData.append("attachment", files[0].files[i]);
}
//执行上传
$.ajax({
url:$oam.ctx + '/dc/mblFileUpload1',
type: "post",
data: formData,
processData: false,
contentType: false,
cache: false,
success: function (data) {
if (data.success != undefined && data.success == true) {
$scope.getSysFileInfoPages();
if ($scope._pageState) $scope._pageState.resetDataState();
var gridVerifyArr = [
{scope: "$scope", grid: ["sysFileInfo"]},
{
scope: "$scope",
grid: ["sysFileInfoAppRtm"],
loadOneToOneSubBoData: false,
clearDeletedJsVariable: false
}
];
_this.gridVerify({boName: "SysFileInfo", scope: $scope, settings: gridVerifyArr});
GillionMsg.alert($scope.sysFileInfoCommon.tip, data.msg);
$timeout(function () {
if ($scope._pageState) $scope._pageState.resetDataState();
});
}
},
});
};
3、controller
后台接受到的MultipartFile[] attachment,大家可以根据业务进行操作
@RequestMapping("/dc/mblFileUpload1")
public ResultVo batchUploadFile1(@RequestParam("attachment")MultipartFile[] attachment,HttpServletRequest request, HttpServletResponse response){
String extension = "MBL";
return batchUploadManager.batchUploadFile(attachment,extension,request,response);
}
关于获取表单内容还有另一种方法:
直接这样:
var formData = new FormData($('#uploadForm')[0]);