多文件上传这个问题以前困扰了我好久后来我经过我的不懈努力终于克服了,其实认真起来所有的事情都会变得特别简单,直接上代码。
架包 (maven) 现在还在手动架包的我只能大写的服
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.1</version>
</dependency>
前端代码
$scope.upload = function (data) {
$scope.addData = data;
var date = new FormData(); //存储文件格式流数据
var logFile = $('#logFile')[0].files[0];
if(logFile.size<20){
return;
}
date.append('img', logFile);
date.append('type',1);
date.append('statu',0);
$http({
method : 'POST',
url : "../graphic/fileLoad",
data : date, //仅仅存放的是文件流数据
headers : {
'Content-Type' : undefined //angularjs设置文件上传的content-type修改方式
},
transformRequest : angular.identity
}).success(function(response) {
$timeout(function () {
$scope.showLoading=false;
},300);
if(response.data==1){
$("#dialog-info").html('上传成功');
$scope.findPictureByType($scope.addData);
$("#dialog-info").fadeIn();
$timeout(function() {
$("#dialog-info").fadeOut();
}, 2000);
}else {
$("#dialog-info").html('上传失败');
$("#dialog-info").fadeIn();
$timeout(function() {
$("#dialog-info").fadeOut();
}, 2000);
$scope.findPictureByType($scope.addData);
};
}).error(function (response) {
$("#dialog-info").html('上传失败');
$("#dialog-info").fadeIn();
$timeout(function() {
$("#dialog-info").fadeOut();
}, 2000);
});
};
使用formData来进行进行流文件的表单提交,通过ajax的提交方式来进行交互。
接下来controller,上传文件并返回图片相对路径,因为我们的图片是上传到服务器tomcat做了虚拟路径的映射,我的是映射到了我的D盘。所以只要提供相对路径就可以找到图片。type statu 两个参数是我做数据库记录使用的,不用管
String path = "";
CommonsMultipartResolver coMultiResolver = new CommonsMultipartResolver(request.getSession().getServletContext());
if (coMultiResolver.isMultipart(request)) {
// 转换Request
MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
//获取图片文件
List<MultipartFile> picFiles = multiRequest.getFiles("img");
path = pictureService.fileUpLoad(picFiles,type,statu);
}
return gson.toJson(path);
Service,我的上传文件做了一个封包进行使用。
String path = FileOperateUtil.PictureFileLoad(picFiles);
logger.info("图片上传成功");
一层 用来进行循环图片使用 工具类
String requestUrl = PropertiesUtil.getPropertiesValue("sys", "Path");//得到请求的URL地址
String path = "";
//统一储存到Library文件夹下
String dataPath = FilePropertiesUtil.getLibraryFolder();
//循环插入图片
for (MultipartFile file : picfile) {
if (!file.isEmpty()) {
path = FileOperateUtil.upload(file, requestUrl,dataPath);
}
}
return path;
存储地址这里我用的是枚举类和配置文件,你们可以直接使用字符串绝对路径就行,这样就不用Tomcat的需路径映射了。
文件上传工具类
String filePath = "";//声明文件相对路径,用来存取数据库
if(null != multipartFile) {
//重命名文件
String fileType = StringUtils.substringAfterLast(multipartFile.getOriginalFilename(), ".");//获取文件后缀名
String newName = StrUtils.uuid() + ("".equals(fileType) ? "" : "." + fileType);//重命名文件名称
//文件上传路径
String fullPath = dataPath+relativePath;//存储文件的文件夹全路径
//创建对应路径文件夹
java.io.File dir = new java.io.File(fullPath);
if (!dir.exists()) {
try {
dir.mkdirs();
} catch (Exception e) {
e.printStackTrace();
}
}
//上传文件
String file = fullPath+"/"+newName;
java.io.File localFile = new java.io.File(file);
try {
multipartFile.transferTo(localFile);
} catch (IOException e) {
e.printStackTrace();
}
filePath =relativePath+newName;
}
return filePath;
第一次对接angularjs 通过逻辑进行总结的 有问题可以评论