Spring MVC 图片上传及预览

整理了一下Spring MVC框架的上传图片及其预览的方法；上传位置可以是项目中指定文件夹、本地指定文件夹或者七牛云空间（见：Spring MVC 上传图片至七牛云图床）,查看博客原文：http://www.dustyblog.cn/110.html

一、Spring MVC为文件上传提供了直接的支持，需要依赖Apache Commons FileUpload的组件：

<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.4</version>
</dependency>

二、SpringMVC中默认没有装配MultipartResolver，因此默认情况下其不能处理文件上传工作，所以需要配置在springmvc-mvc.xml进行配置：

<bean id="multipartResolver"
class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="maxUploadSizePerFile" value="52428800"/>
<property name="defaultEncoding" value="UTF-8"/>
</bean>

三、前端异步请求，需要ajaxfileupload.js的插件(点此下载)

HTML：

<img id="avatarImg" src="/default-share.jpg" alt="Spring MVC 文件上传" />
<input type="file" id="imgurl" name="file"onchange="uploadPic(this.id);"
accept="image/gif, image/jpeg, image/png">
<input type="button" value="更换头像" onclick="getElementById('imgurl').click()">

Ajax请求（记得导入jquery和ajaxfileupload.js插件）

function uploadPic(imgId) {
$.ajaxFileUpload(
{
url: '/uploadImg', //用于文件上传的服务器端请求地址
secureuri: false, //是否需要安全协议，一般设置为false
fileElementId: imgId, //文件上传域的ID
dataType: 'json', //返回值类型一般设置为json
success: function (data){ //服务器成功响应处理函数
if(data == "OUTOFSIZE"){
swal("图片大小超出3M限制!");
}else if(data == "ERROR"){
swal("图片错误！请重新上传！");
}else if(data=="EMPTY"){
swal("未选择图片")
}else {
// 我这里是上传到项目中的，所以这里获取一下
var src="http://localhost:8080/resources/upload/"+data;
$("#avatarImg").attr("src",src);
}
},
error: function () {
alert("上传失败");
},
}
);
}

四、控制层处理，这里需要注意，这里介绍了两种上传位置：上传到项目中/本地文件夹，详见26-30行代码及其备注，如需上传到图床，请参考：

Spring MVC 上传图片至七牛云图床

// 上传图片的大小
private static Double Mb = 1024.0 * 1024.0;
private static Double maxSize = 3.0;
// 图片重复名称计数
private static Integer index = 1;
//上传图片到项目中/本地
@RequestMapping(value = "/uploadImg",method = RequestMethod.POST)
@ResponseBody
public String uploadImg(HttpServletRequest request, @RequestParam("file") MultipartFile file) throws Exception {
//如果文件不为空，写入上传路径
if(!file.isEmpty()) {
if(!checkSize(file)){
return "OUTOFSIZE";//超出限制大小
}
String widthAndHeight = this.getWidthAndHeight(file);
if(widthAndHeight.equals("ERROR")){
return "ERROR";
}
//文件的完整名称,如image.jpg
String filename = file.getOriginalFilename();
//文件名,如image
String name = filename.substring(0,filename.indexOf("."));
//文件后缀,如.jpg
String suffix = filename.substring(filename.lastIndexOf("."));
//上传文件路径：
// 1、上传到项目中
String path = request.getServletContext().getRealPath("/resources/upload");
// 2、上传到本地
// String path = "E:\\upload";
File filepath = new File(path,filename);
//若文件存在重命名,更改文件名如：image(1).jpg 后上传
String newFilename = filename;
while(filepath.exists()) {
newFilename = name+"("+index+")"+suffix;
String parentPath = filepath.getParent();
filepath = new File(parentPath+File.separator+newFilename);
filename = newFilename;
index++;
}
//判断路径是否存在，如果不存在就创建一个
if (!filepath.getParentFile().exists()) {
filepath.getParentFile().mkdirs();
}
//将上传文件保存到一个目标文件当中
file.transferTo(new File(path + File.separator + filename));
return filename;
}
return "EMPTY";
}
/**
* 校验大小，上传图片不能大于3M
* @param file
* @return
*/
public static boolean checkSize(MultipartFile file){
//校验大小
double ratio = file.getSize() / Mb;
if(ratio > maxSize){
return false;
}else{
return true;
}
}

效果展示：

Spring MVC 图片上传

MultipartFile提供了获取上传文件内容、文件名等方法。通过transferTo()方法还可以将文件存储到硬件中，MultipartFile对象中的常用方法如下：

byte[] getBytes()：获取文件数据
String getContentType[]：获取文件MIME类型，如image/jpeg等；
InputStream getInputStream()：获取文件流；
String getName()：获取表单中文件组件的名字；
String getOriginalFilename()：获取上传文件的原名；
Long getSize()：获取文件的字节大小，单位为byte；
boolean isEmpty()：是否有上传文件；
void transferTo(File dest)：将上传文件保存到一个目录文件中。