SSM实现图片上传下载功能

0. 基本步骤

  1. 框架搭建
  2. 实现带图片上传的注册功能
  3. 实现下载功能

1. 框架搭建

Step1 创建开发项目

创建基础MVC包结构:controller、service、mapper、pojo

Step2 导入jar包

导入SpringMVC的jar、Spring的jar、MyBatis的jar、上传文件的jar

Step3 配置文件

  1. 配置applicationcontext.xml文件
    开启service包注解扫描
    配置数据库信息properties文件
    配置数据源bean
    配置SqlSession工厂bean
    配置mapper扫描bean,记得把工厂依赖设置为属性注入
    配置事务管理
  2. 配置springmvc.xml文件
    配置controller包注解扫描
    配置springmvc 注解驱动
    配置静态资源放行
    配置文件上传资源解析bean
  3. 配置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();
}
阅读 147

推荐阅读