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("");

$("#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页面实现

2.4 实现用户信息注册功能

实现思路：

Step1 用

标签收集页面所有数据

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();

}