1、前台页面： 引入js和css
全选复制放进笔记
<link type="text/css" rel="stylesheet" href="<%=basePath%>static/js/uploadifive/uploadifive.css" />
<script type="text/javascript" src="<%=basePath%>static/js/uploadifive/jquery.min.js"></script>
<script type="text/javascript" src="<%=basePath%>static/js/uploadifive/jquery.uploadifive.min.js"></script>
2、控件初始化：
全选复制放进笔记
<script type="text/javascript">
$(function() {
$('#file_upload').uploadifive({
'auto' : false,
'buttonClass': 'btn btn-primary',
'buttonText': "选择文件",
'queueID' : 'uploadqueue',
'uploadScript' : '/tools/uploadfiles',
'onUploadComplete' : function(file, data) { console.log(data); }
});
});
</script>
3、body页面内容：
全选复制放进笔记
<div id="uploadqueue">
<input id="file_upload" name="file_upload" type="file" multiple="true">
<a href="javascript:$('#file_upload').uploadifive('upload')">上传文件</a> |
<a href="javascript:$('#file_upload').uploadifive('stop')">停止上传!</a>
</div>
4、后台Controller:
全选复制放进笔记
@RequestMapping(value = "/uploadfiles")
@ResponseBody
public JSONArray uploadFile(HttpServletRequest request){
Calendar calendar=Calendar.getInstance();
List<String> filePathList = new ArrayList<String>();
String filePath= SysConstant.UPLOADPATH;
String filePathUrl=SysConstant.UPLOADPATHURL+"/"+calendar.get(Calendar.YEAR)+calendar.get(Calendar.MONTH);
filePath=filePath+File.separatorChar+calendar.get(Calendar.YEAR)+calendar.get(Calendar.MONTH);
try {
filePathList = FileUploadUtil.uploadFile(request, filePath,filePathUrl);
} catch (FileNotFoundException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch(Exception ex){
ex.printStackTrace();
}
if(filePathList.size() == 0){
//return "系统错误";
}
return JSONArray.fromObject(filePathList);
}
5、上传类FileUploadUtil.java
全选复制放进笔记
public class FileUploadUtil {
private static final Logger log = LoggerFactory.getLogger(FileUploadUtil.class);
public static List<String> uploadFile(HttpServletRequest request, String filePath,String filePathUrl) throws FileNotFoundException {
List<String> filePathList = new ArrayList<String>();
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
Map<String, MultipartFile> fileMap = multipartRequest.getFileMap();
String fileName = null;
for (Map.Entry<String, MultipartFile> entity : fileMap.entrySet()) {
MultipartFile mf = entity.getValue();
fileName = mf.getOriginalFilename();
String newfilepath;
newfilepath = filePath + File.separatorChar + fileName;
System.out.println("newfilepath=" + newfilepath);
File dest = new File(filePath);
if (!dest.exists()) {
dest.mkdirs();
}
File uploadFile = new File(newfilepath);
if (uploadFile.exists()) {
uploadFile.delete();
}
try {
log.info("start upload file: " + fileName);
FileCopyUtils.copy(mf.getBytes(), uploadFile);
} catch (IOException e) {
// TODO Auto-generated catch block
// e.printStackTrace();
log.info("upload failed. filename: " + fileName + e.getMessage());
return null;
}
filePathList.add(filePathUrl+"/"+fileName);
}
return filePathList;
}
}
6、配置spring-mvc.xml文件：
全选复制放进笔记
<!-- 文件上传表单的视图解析器 -->
<bean id="multipartResolver"
class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!-- set the max upload size100MB -->
<property name="maxUploadSize">
<value>104857600</value>
</property>
<property name="maxInMemorySize">
<value>4096</value>
</property>
</bean>
7、需要增加的jar文件：
全选复制放进笔记
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.1</version>
</dependency>
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.4</version>
</dependency>
总结：这次上传花了一点时间，遇到几个小问题。所以留下来供大家参考。