1.html
anction为后端路径
enctype="multipart/form-data"为文件提交类型
<form action="/AppStore/file/upload" name="myForm" id="fileForm" enctype="multipart/form-data" method="post" class="form-horizontal">
<!-- START panel-->
<div class="panel panel-default">
<input type="text" name="id" value="{{id}}" hidden>
<div class="panel-heading">
<div class="panel-title">上传文件</div>
</div>
<div class="panel-body">
<fieldset>
<div class="form-group">
<label class="col-sm-2 control-label">安卓安装包</label>
<div class="col-sm-6">
<input type="file" accept=".apk" name="apkFile" required="required" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">苹果安装包</label>
<div class="col-sm-6">
<input type="file" accept=".ipa" name="ipaFile" required="required" />
</div>
</div>
</fieldset>
<fieldset>
<div class="form-group">
<label class="col-sm-2 control-label">上传图标</label>
<div class="col-sm-6">
<input type="file" accept=".png" name="appIcon" required="required"/>
</div>
</div>
</fieldset>
<fieldset>
<div class="row">
<label class="col-sm-2 control-label">上传图片</label>
<div style="margin-left:300px;margin-top:20px">
演示图片1
<input type="file" accept=".png" name="appShow" required="required"/><br/>
</div>
<div style="margin-left:300px;margin-top:20px">
演示图片2
<input type="file" accept=".png" name="appShow" required="required"/><br/>
</div>
<div style="margin-left:300px;margin-top:20px">
演示图片3
<input type="file" accept=".png" name="appShow" required="required"/><br/>
</div>
<div style="margin-left:300px;margin-top:20px">
演示图片4
<input type="file" accept=".png" name="appShow" required="required"/><br/>
</div>
</div>
</fieldset>
</div>
<div class="panel-footer text-center">
<button type="button" class="btn btn-info" ng-click="saveReport()" ng-disabled="myForm.$invalid">确认</button>
</div>
</div>
<!-- END panel-->
</form>
2.springmvc后端
multipartResolver 根据文件名解析获取文件
@RequestMapping(value="/upload", method=RequestMethod.POST )
@ResponseBody
public Map<String, Object> upload(HttpServletRequest request,HttpServletResponse response){
Map<String, Object> resMap = new HashMap<String, Object>();
// 获取appId
int id = Integer.parseInt(request.getParameter("id"));
resMap.put("id", id);
String rootPath=UploadFileController.class.getResource("/").getFile();
rootPath = rootPath.substring(1, rootPath.length()-8);
String apkPath=rootPath+"file"+"/apk/";
String ipaPath=rootPath+"file"+"/ipa/";
String appIconPath=rootPath+"img"+"/AppIcon"+"/";
String appShowPath=rootPath+"img"+"/AppShow"+"/"+id+"/";
try {
//创建一个通用的多部分解析器
CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(request.getSession().getServletContext());
//判断 request 是否有文件上传,即多部分请求
System.out.println("1");
if(multipartResolver.isMultipart(request)){
System.out.println("2");
//转换成多部分request
MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest)request;
MultipartFile apkFile=multiRequest.getFile("apkFile");
MultipartFile ipaFile=multiRequest.getFile("ipaFile");
MultipartFile appIconFile=multiRequest.getFile("appIcon");
List<MultipartFile> appShowFiles=multiRequest.getFiles("appShow");
UploadMultipartFile.saveOneFile(apkFile, apkPath, id);
UploadMultipartFile.saveOneFile(ipaFile, ipaPath, id);
UploadMultipartFile.saveOneFile(appIconFile, appIconPath, id);
UploadMultipartFile.saveListFile(appShowFiles, appShowPath, id);
Map<String, String> checkMap=fileService.checkFile(id);
for (Object o : checkMap.keySet()) {
System.out.println("key=" + o + " value=" + checkMap.get(o));
if (checkMap.get(o).equals("false")) {
resMap.put("result", "error");
break;
}else {
resMap.put("result", "success");
}
}
}else {
resMap.put("result", "error");
}} catch (Exception e) {
resMap.put("result", "error");
return resMap;
}
return resMap;
}
3.UploadMultipartFile
将MultipartFile保存为本地文件
package com.baosight.webapp.util;
import java.io.File;
import java.io.IOException;
import java.util.List;
import org.springframework.web.multipart.MultipartFile;
import com.baosight.webapp.web.UploadFileController;
public class UploadMultipartFile {
public static void saveOneFile(MultipartFile file,String path,int id){
try {
System.out.println("empty");
if (!file.isEmpty()) {
System.out.println("not empty");
System.out.println("file:"+file.getOriginalFilename());
String OriginalNameArr[]=file.getOriginalFilename().split("[.]");
String fileName = id+"."+OriginalNameArr[OriginalNameArr.length-1];
path=path+fileName;
System.out.println("path:"+path);
File localFile = new File(path);
try {
if(!localFile.getParentFile().exists()) {
//如果目标文件所在的目录不存在,则创建父目录
localFile.getParentFile().mkdirs();
System.out.println("parent:"+localFile.getParentFile().getPath());
}
file.transferTo(localFile);
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
} catch (Exception e) {
System.out.println("exce[tion2");
System.out.println(e.getMessage());
}
}
public static void saveListFile(List<MultipartFile> files,String path,int id){
try {
String path2="";
if(files!=null&&files.size()>0){
int j=0;
for (MultipartFile multipartFile : files) {
if (!multipartFile.isEmpty()) {
j++;
String OriginalNameArr[]=multipartFile.getOriginalFilename().split("[.]");
path2=path+j+"."+OriginalNameArr[OriginalNameArr.length-1];
File localFile = new File(path2);
if(!localFile.getParentFile().exists()) {
//如果目标文件所在的目录不存在,则创建父目录
localFile.getParentFile().mkdirs();
System.out.println("parent:"+localFile.getParentFile().getPath());
}
try {
multipartFile.transferTo(localFile);
} catch( Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
}} catch (Exception e) {
System.out.println("exception1");
// TODO: handle exception
}
}
}
4.阻止表单提交后的跳转动作
引入jquery.js和jquery-form.js文件
本文这里基于angularjs+html5开发,有angularjs多文件上传有问题后,使用form表单上传文件,为了有回调信息使用jquery-form.js阻止表单跳转
按钮触发的事件:ng-click="saveReport()"
$scope.saveReport=function saveReport() {
$scope.showFile=false;
$scope.showProgress=true;
// jquery 表单提交
$("#fileForm").ajaxSubmit(function(message) {
console.log( message);
if(message.result=="success"){
alert("上传成功");
$state.go("dash",null,{reload:true});
}else{
alert("上传失败,请在更新中重新上传");
$state.go("dash");
}
});
return false; // 必须返回false,阻止页面跳转
}
package com.baosight.webapp.util;
import java.io.File;
import java.io.IOException;
import java.util.List;
import org.springframework.web.multipart.MultipartFile;
import com.baosight.webapp.web.UploadFileController;
public class UploadMultipartFile {
public static void saveOneFile(MultipartFile file,String path,int id){
try {
System.out.println("empty");
if (!file.isEmpty()) {
System.out.println("not empty");
System.out.println("file:"+file.getOriginalFilename());
String OriginalNameArr[]=file.getOriginalFilename().split("[.]");
String fileName = id+"."+OriginalNameArr[OriginalNameArr.length-1];
path=path+fileName;
System.out.println("path:"+path);
File localFile = new File(path);
try {
if(!localFile.getParentFile().exists()) {
//如果目标文件所在的目录不存在,则创建父目录
localFile.getParentFile().mkdirs();
System.out.println("parent:"+localFile.getParentFile().getPath());
}
file.transferTo(localFile);
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
} catch (Exception e) {
System.out.println("exce[tion2");
System.out.println(e.getMessage());
}
}
public static void saveListFile(List<MultipartFile> files,String path,int id){
try {
String path2="";
if(files!=null&&files.size()>0){
int j=0;
for (MultipartFile multipartFile : files) {
if (!multipartFile.isEmpty()) {
j++;
String OriginalNameArr[]=multipartFile.getOriginalFilename().split("[.]");
path2=path+j+"."+OriginalNameArr[OriginalNameArr.length-1];
File localFile = new File(path2);
if(!localFile.getParentFile().exists()) {
//如果目标文件所在的目录不存在,则创建父目录
localFile.getParentFile().mkdirs();
System.out.println("parent:"+localFile.getParentFile().getPath());
}
try {
multipartFile.transferTo(localFile);
} catch( Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
}} catch (Exception e) {
System.out.println("exception1");
// TODO: handle exception
}
}
}
4.阻止表单提交后的跳转动作
引入jquery.js和jquery-form.js文件
本文这里基于angularjs+html5开发,有angularjs多文件上传有问题后,使用form表单上传文件,为了有回调信息使用jquery-form.js阻止表单跳转
按钮触发的事件:ng-click="saveReport()"
$scope.saveReport=function saveReport() {
$scope.showFile=false;
$scope.showProgress=true;
// jquery 表单提交
$("#fileForm").ajaxSubmit(function(message) {
console.log( message);
if(message.result=="success"){
alert("上传成功");
$state.go("dash",null,{reload:true});
}else{
alert("上传失败,请在更新中重新上传");
$state.go("dash");
}
});
return false; // 必须返回false,阻止页面跳转
}