关于java: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();}