1.首先是HTML部分
<input type="file" id="id-input-file-3" onchange="setImg(this);" />
2.js部分
<script>
var image = '';
function setImg(obj){//用于进行图片上传,返回地址
var f=$(obj).val();
console.info(f);
if(f == null || f ==undefined || f == ''){
return false;
}
if(!/\.(?:png|jpg|bmp|gif|PNG|JPG|BMP|GIF)$/.test(f))
{
$(obj).val('');
alert("文件格式错误");
return false;
}
var data = new FormData();
$.each($(obj)[0].files,function(i,file){
data.append('file', file);
});
console.info(data);
$.ajax({
type: "POST",
url: "image/imageUpload.do",
data: data,
cache: false,
contentType: false, //不可缺
processData: false, //不可缺
dataType:"json",
success: function(suc) {
if(suc.code==0){
alert("上传成功") ;
}else{
alert("上传失败") ;
}
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
}
});
}
</script>
3.添加 commons-fileupload.jar包
4.配置 spring mvc 文件上传的解析器
<!-- 设置上传文件最大值 1M=1*1024*1024(B)=1048576 bytes -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="maxUploadSize" value="1048576" />
<property name="defaultEncoding" value="UTF-8"/>
</bean>
5.将图片保存至服务器,并将文件存储路径保存在数据库中。
文件存储位置:D:\.metadata\.me_tcat\webapps\footplatform\images
最后存在数据库中的地址为:http://localhost:8080/footplatform/images/20180809/1533781708442_736.jpg
public String imageUpload(MultipartFile file,HttpServletRequest request){
String msg="";//返回存储路径
int code=1;
String fileName=file.getOriginalFilename();//获取文件名加后缀
if(fileName!=null&&fileName!=""){
String returnUrl = request.getScheme() + "://" + request.getServerName()
+":" + request.getServerPort() + request.getContextPath() +"/images/";//访问路径
String path = request.getSession().getServletContext().getRealPath("/images");
//文件存储位置
String fileF = fileName.substring(fileName.lastIndexOf("."),fileName.length());
//文件后缀
fileName=new Date().getTime()+"_"+new Random().nextInt(1000)+fileF;//新的文件名
String dateFormatTo = "yyyyMMdd";
SimpleDateFormat dateFormat = new SimpleDateFormat(dateFormatTo);
String fileAdd = dateFormat.format(new Date());
File file1 =new File(path+"/"+fileAdd);
if(!file1 .exists() && !file1 .isDirectory()){ //如果文件夹不存在则创建
file1 .mkdir();
}
File targetFile = new File(file1, fileName);
try {
file.transferTo(targetFile);//转存文件,上传文件写到服务器上指定的文件。
msg=returnUrl+fileAdd+"/"+fileName;
code=0;
System.out.println(msg);
} catch (Exception e) {
e.printStackTrace();
}
}
HttpSession session = request.getSession();
LawyerInfo lawyerInfo=(LawyerInfo) session.getAttribute("lawyerLogin");
String user_id=lawyerInfo.getUserId();
iPhotoService.upload(user_id, msg);//将文件存储路径存储到数据库
return JSON.toJSONString(ResponseResult.result(code, msg));
}
6.可以看到文件上传到了服务器中
最后的效果
在其他页面使用