0. 根本步骤
- 框架搭建
- 实现带图片上传的注册性能
- 实现下载性能
1. 框架搭建
Step1 创立开发我的项目
创立根底 MVC 包构造:controller、service、mapper、pojo
Step2 导入 jar 包
导入 SpringMVC 的 jar、Spring 的 jar、MyBatis 的 jar、上传文件的 jar
Step3 配置文件
- 配置 applicationcontext.xml 文件
开启 service 包注解扫描
配置数据库信息 properties 文件
配置数据源 bean
配置 SqlSession 工厂 bean
配置 mapper 扫描 bean,记得把工厂依赖设置为属性注入
配置事务管理 - 配置 springmvc.xml 文件
配置 controller 包注解扫描
配置 springmvc 注解驱动
配置动态资源放行
配置文件上传资源解析 bean - 配置 web.xml 文件
配置 spring 配置文件加载门路
配置 spring 容器资源加载监听器
配置 SpringMVC 的 DispatcherServlet
配置编码过滤器
2. 实现带图片上传的注册性能
基本思路:
Step1 先实现图片的异步上传,反显图片,获取图片上传后的存储门路,
Step2 将注册的数据、头像图片的存储门路一并提交至后盾实现注册。
2.1 JS 实现图片异步上传
实现思路:
Step1 首先引入 jQuery 文件
Step2 增加注册按钮单击事件
Step3 获取上传文件数据、利用 FormData 对象封装数据
Step4 ajax 形式提交后盾,留神 processData 设置为 false、contentType 设置为 false
Step5 上传胜利后回显图片,将图片门路填至暗藏域
具体 JS 实现图片上传办法:
$(function($("#uploadBtn").click(function(){
// 获取上传文件
var uploadPhoto = $("#upload")[0].files[0];
// 利用 FormDate 对象封装文件数据
var formdata = new FormData();
formdata.append("uploadPhoto",uploadPhoto);
$.ajax({
url:'regUpload',
type:'post',
processData:false,
contentType:false,// 设置 false,将申请数据类型设置为 multipart/form-data
data:formdata,
success:function(data){if(data.result){alert("上传胜利!");
$("#imageSpan").html("<img src='<%=basePath%>"+data.msg+"' width='100px' />");
$("#imgPath").val(data.msg);
}else{alert("上传失败!起因:"+data.msg);
}
}
});
});
));
2.2 后盾解决上传的图片
实现思路:
1、获取文件在服务器存储中的理论门路
2、获取文件原始文件名,随机生成文件名
3、理论门路拼接随机文件名,将文件存储至指标门路
4、存储文件的原始名、随机名、文件类型至数据库
5、返回上传后果、存储门路 + 文件名
具体代码如下:
@RequestMapping("regUpload")
@ResponseBody
public Result regUpload(MultipartFile uploadPhoto, HttpServletRequest request) throws IOException {
// 业务解决
// 1、获取文件在服务器存储中的理论门路
String realPath = request.getServletContext().getRealPath("/uploadImage/");
File pathFile = new File(realPath);
if(!pathFile.exists()){pathFile.mkdirs();
}
// 2、获取文件原始文件名,随机生成文件名
String originalFilename = uploadPhoto.getOriginalFilename();
String suffix = originalFilename.substring(originalFilename.lastIndexOf("."));
String fileName = UUID.randomUUID()+suffix;
// 3、理论门路拼接随机文件名,将文件存储至指标门路
uploadPhoto.transferTo(new File(realPath+fileName));
// 4、存储文件的原始名、随机名、文件类型至数据库
String contentType = uploadPhoto.getContentType();
PhotoImage photoImage = new PhotoImage("/uploadImage/"+fileName, originalFilename, fileName, contentType);
System.out.println("============================");
int flag = 0 ;
try{flag =photoImageService.insertImage(photoImage);
}catch (Exception e){e.printStackTrace();
}
if(flag==1){
// 5、返回上传后果、存储门路 + 文件名
Result result = new Result(true,"uploadImage/"+fileName);
return result;
}else{return new Result(false,"图片存储失败!");
}
}
2.3 html 页面实现
<div style="width:500px; margin:auto; margin-top:20px;">
<form id="regForm" action="regUser" method="post">
<table>
<tr>
<td> 用户名:</td>
<td><input id="username" type="text" name="uname"></td>
</tr>
<tr>
<td> 明码:</td>
<td><input id="password" type="text" name="pwd"></td>
</tr>
<tr>
<td colspan="2" align="center"><span id="imageSpan"></span></td>
</tr>
<tr>
<td> 上传文件:</td>
<td>
<input id="upload" type="file" name="file">
<input type="hidden" id="imgPath" name = "imgPath">
<input type="button" id="uploadBtn" value="上传">
</td>
</tr>
<tr>
<td colspan="2">
<input id="submitBtn" type="submit" value="注册">
</td>
</tr>
</table>
</form>
</div>
2.4 实现用户信息注册性能
实现思路:
Step1 用 <form> 标签收集页面所有数据
Step2 submit 按钮提交至后盾
Step3 通过 service、mapper 存储
具体实现代码:
@RequestMapping("regUser")
public String regUser(User user){
// 业务解决
int flag = userService.insertUser(user);
// 申请转发
//return "forward:register.jsp";
return "register";
}
3. 实现图片下载性能
实现思路:
Step1 前台用超链接触发下载性能,将要下载的文件名作为申请参数带上
Step2 后盾接管申请,先设置响应头,表明为下载申请:
`response.setHeader("Content-Disposition", "attachment;filename="+filenName);`
Step3 获取文件的在硬盘上的绝对路径
Step4 利用 FileUtils 将文件转成 byte 数组
Step5 从相应对象中获取输入流,将 byte 数组写出
Step6 革除输入流的缓存、敞开输入流
具体代码:
@RequestMapping("downloadFile")
public void downloadFile(String filename,HttpServletRequest req, HttpServletResponse resp) throws IOException {
// Step2 后盾接管申请,先设置响应头,表明为下载申请
resp.setHeader("Content-Disposition", "attachment;filename="+filename);
// Step3 获取文件的在硬盘上的绝对路径
String realPath = req.getServletContext().getRealPath("/uploadImage/");
// Step4 利用 FileUtils 将文件转成 byte 数组
File file = new File(realPath,filename);
byte[] bytes = FileUtils.readFileToByteArray(file);
// Step5 从相应对象中获取输入流,将 byte 数组写出
ServletOutputStream os = resp.getOutputStream();
os.write(bytes);
// Step6 革除输入流的缓存、敞开输入流
os.flush();
os.close();}