目录
同样是百度无法给出更好的解决方案,所以索性自己拼凑一下,使用angular 提交form 表单时,允许上传多个文件,后台为 spring springMVC mybatis
前端html
<input type="text" ng-model="param.empCode" placeholder="请输入员工工号" >
<input id="fileUpload" name="files" multiple="multiple" type="file" />
<button class="btn btnImg pubBtn" type="submit" ng-click="submitForm()" >
一个员工工号,一个file,一个确认按钮,
js脚本
$scope.submitForm = function() {
var form = new FormData();
var files = document.querySelector('input[name="files"]').files;
for (var i=0; i<files.length; i++) {
form.append("file", files[i]);
}
var user =JSON.stringify($scope.param);
form.append('user',user); file_action.uploadfile("/eHR/chargebackInformation/infoAdd",form,function (data){
if(data.code>0){
toaster.pop("success", "", "成功!");
}else{
toaster.pop("fail", "", "提交失败,请检查参数!");
}
});
};
ps: 其中form 为传输过去的整个表单,对于多个文件,需要使用append将所有的文件全部加入到form中,
file_action是我自己封装的一个上传的组件,
底层如下
(function (angular) {
'use strict';
angular.module('app').factory("file_action", function ($rootScope, common_base, $http) {
var service = { uploadfile: function (url,data, callback) { if (common_base.is_function(data)) { callback = data; data = undefined; } $http({ method: 'POST', url: $rootScope.app.getway + url, data: data, headers: {'Content-Type':undefined}, transformRequest: angular.identity }).success(function (data, header, config, status) { callback(data); }).error(function (data, header, config, status) { alert("文件上传调用接口失败,请联系管理员"); }); } };
return service;
})
})(window.angular);
后台接受
@RequestMapping(value = "/infoAdd",method = RequestMethod.POST)
public ResponseMessage chargebackAdd(
@RequestParam(value = "file", required = false) MultipartFile[] files,
@RequestParam(value = "user", required = false)String user,
HttpServletRequest request) throws Exception{
//拿到这个表单其他的元素的值,使用jackson转化我model
ObjectMapper objectMapper = new ObjectMapper(); objectMapper.configure(DeserializationFeature.FAIL_ON_UNKNOWN_PROPERTIES,false);
ChargebackInformationBean chargebackInformationBean = objectMapper.readValue(user, ChargebackInformationBean.class);
//将文件保存
if(files!=null&&files.length>0){
for(int i=0;i<files.length;i++){
FILEUtil.saveUploadFile(files[i],request,id);
}
}
}
文件工具类进行保存
public static String saveUploadFile(MultipartFile file, HttpServletRequest request,Long id ) throws Exception {
String newFileName ="";
FileOutputStream fos =null;
InputStream in=null;
try {
// 获得原始文件名
String fileName = file.getOriginalFilename();
// 新文件名
newFileName =fileName;
// 获得项目的路径
ServletContext sc = request.getSession().getServletContext();
// 上传位置 图片
String path = sc.getRealPath("/upload/")+id.toString()+"/"; // 设定文件保存的目录
File f = new File(path);
if (!f.exists())
f.mkdirs();
if (!file.isEmpty()) {
fos = new FileOutputStream(path + newFileName);
in = file.getInputStream();
int b = 0;
while ((b = in.read()) != -1) {
fos.write(b);
}
fos.close();
in.close();
}
}catch (Exception e){
LOGGER.info("上传的文件保存出错",e);
throw new BusinessException(MessageCode.EXCEPTION_FILE_HANDLE.getValue(),MessageCode.EXCEPTION_FILE_HANDLE.getType());
}finally {
if(fos!=null){
fos.close();
}
if(in!=null){
in.close();
}
}
return newFileName;
}