Spring3+mybatis3上传图片保存至Sqlserver中和图片显示在网页

项目框架是 Spring3  和 Mybatis3

其实 有人会问我的项目的图片怎么会保存的数据库  这样不是大大影响了数据库的性能 

1.本项目比较小没有关系的

2.图片都加了验证大小的不让他超过140K 

3.对于要上传一些大的文件或者图片来说 个人建议还是 存在服务器上的文件夹中  数据库里面保存一个路径

1.配置文件没有什么配置还是原来的Spring 和 mybatis的配置 没有改动

不过看网上的资料  可以在Spring里面配置上传文件的大小 ，我这边是在页面的JS里面实现的

2.上传页面  HTML 代码

<form method="post" action="<c:url value="/addimage" />"enctype="multipart/form-data"><table id="touxiang" style="display: none;" width="99%"height="300px" border="0" align="center" cellpadding="0"cellspacing="0" bordercolor="#D3E4EB"style="border-collapse:collapse "><tr><td><font size="2" color="#663300"> <strong><table><tr><td colspan="2" class="label"><font size="2"color="#ff0066"><center><span id="errorTips"> </span></center></font></td></tr><tr><td colspan="" class="label"><center>文件上传</center></td><td class="label" align="left"><div id="d"><input type="file" id="fileurl" name="fileurl" value=""onChange="accp()" /></div></td><tr><td colspan="2" class="label"><center><font size="1" color="red">注意文件的大小不能大于140K！文件的格式jpg，png格式</font></center></td></tr><tr><td colspan="" valign="top" class="label"><center>图片预览</br> <input type="submit" value="上传图片"></center></td><td class="label" align="left"><div id="d"><img id="img" onload="sizeCheck(this)" class="img"height="200px" width="200px" src=""></div></td></tr></table></strong></font></td></tr></table></form>

需要注意的是  from的 属性 

<strong><span style="color:#ff0000;">enctype="multipart/form-data"</span></strong>

一定要填写的 这是识别文件上传的

页面需要的JS文件

var MAXSIZE = 140 * 1024; //限制上传图片大小100K var ERROR_IMGSIZE = "图片大小不能超过140K"; //图片大小限制信息 function accp(){//显示选择图片   var imgurl= document.getElementById("fileurl").value;  var filename="";if(imgurl.indexOf(".")>0){ filename=imgurl.substring(imgurl.lastIndexOf("."),imgurl.length);}else{filename=path;}var exp = /.\.jpg|.\.gif|.\.png|.\.bmp/i;                     if(!exp.test(filename)){updateTips("图片格式错误！请重新选择图片！");            document.getElementById("img").src="";  }   document.getElementById("img").src=imgurl;}function updateTips(str) { //提示信息   document.getElementById("errorTips").innerHTML=str;  } function sizeCheck(img) {      updateTips("");        if(img.readyState=="complete"||img.readyState=="loaded"){ //onload加载完成                 if (img.fileSize > MAXSIZE) { //判断图片的大小是不是满足updateTips(ERROR_IMGSIZE);document.getElementById("img").src="";}        }else{updateTips("图片加载未完成！请重新选择图片！");document.getElementById("img").src="";   }} 

这边注意的是  img的 onload方法 要判断是否加载完  如果需要用onload方法 没有加载完取出来的图片属性是准确的

前台好了 我们说说SQL里面的字段  我们 保存 图片的SQL属性是Sqlserver的IMAGE属性

创建两个字段 一个是 useriamge  IMAGE  属性    这个是保存图片的

                                     userimagestatus  INT 属性  这个是我们读取图片时 第一次用来判断的  默认是空  保存图片后 改成1

我们开始我们的后台代码  

根据我们的spring的架构  我们先建实体类user。java

package com.netmarch.bean;import java.io.Serializable;public class User implements Serializable {private static final long serialVersionUID = -558463189792452716L;private int id;private String name;private String code;private String password;private int status;private String cdate;private String udate;private String ddate;private byte[] userimage;//保存图片的字段private int userimagestatus;//保存状态的字段public int getId() {return id;}public void setId(int id) {this.id = id;}public String getName() {return name;}public void setName(String name) {this.name = name;}public String getCode() {return code;}public void setCode(String code) {this.code = code;}public String getPassword() {return password;}public void setPassword(String password) {this.password = password;}public int getStatus() {return status;}public void setStatus(int status) {this.status = status;}public String getCdate() {return cdate;}public void setCdate(String cdate) {this.cdate = cdate;}public String getUdate() {return udate;}public void setUdate(String udate) {this.udate = udate;}public String getDdate() {return ddate;}public void setDdate(String ddate) {this.ddate = ddate;}public byte[] getUserimage() {return userimage;}public void setUserimage(byte[] userimage) {this.userimage = userimage;}public int getUserimagestatus() {return userimagestatus;}public void setUserimagestatus(int userimagestatus) {this.userimagestatus = userimagestatus;}}

这里要注意的是的 userimage的属性是 byte[] 

好了 我们在处理我们的接口service

public void insertUserImage(User user);

public User getUserById(int id) throws Exception;

然后我们接口的实现类

public void insertUserImage(User user) {userMapper.insertUserImage(user);}

public User getUserById(int id) throws Exception {<span style="white-space:pre"></span>return userMapper.getUserById(id);<span style="white-space:pre"></span>}

在下面就是我们的mapper接口  （即执行操作数据库的接口 对应一个XML文件）

public void insertUserImage(User user);

public User getUserById(int id);

下面就是我们所对应的XML文件  即是 mybatis操作数据库语句配置文件

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"><mapper namespace="com.netmarch.mapper.UserMapper"><select id="insertUser" parameterType="User" resultType="int">insert into t_user (name, code, password,cdate,status) values (#{name}, #{code}, sys.fn_VarBinToHexStr(hashbytes('MD5', #{password})),getdate(),1)SELECT cast(SCOPE_IDENTITY() as int) AS id</select><delete id="removeUser" parameterType="int">update t_user set status = 0, ddate = getdate() where id = #{id}</delete><select id="checkUser" parameterType="User" resultType="User">     select t.* from t_user t where t.code = #{code} and password=sys.fn_VarBinToHexStr(hashbytes('MD5', #{password})) and t.status = 1</select><update id="updateUser" parameterType="User">update t_User set code = code<if test="name != null"> , name = #{name} </if><if test="password != null"> , password = sys.fn_VarBinToHexStr(hashbytes('MD5', #{password}) )</if>where id = #{id} </update><update id="insertUserImage" parameterType="User">update t_User set userimage = #{userimage} ,userimagestatus=1where id = #{id} </update><select id="getAllUser" resultType="User">SELECT  t.id, t.name, t.code, t.password, t.status, convert(varchar, t.cdate, 20) as cdate,  convert(varchar, t.udate, 20) as udate,   convert(varchar, t.ddate, 20) as ddate FROM t_user tWHERE  t.status=1</select><select id="findPageUser"  parameterType="Page" resultType="User"> SELECT top ${pageSize}  t.id, t.name, t.code, t.password, t.status, convert(varchar, t.cdate, 20) as cdate,  convert(varchar, t.udate, 20) as udate,  convert(varchar, t.ddate, 20) as ddate ,userimage FROM t_user t WHERE t.id NOT IN          (          SELECT TOP (${pageSize}*(${pageNo}-1)) id FROM t_user where status=1  ORDER BY id          )         and t.status=1 ORDER BY t.id</select><select id="getTotalPage" resultType="int">select count(*) from t_user where status=1</select><select id="getUserById" parameterType="int" resultType="User">select t.id, t.name, t.code, t.password, t.status, convert(varchar, t.cdate, 20) as cdate, convert(varchar, t.udate, 20) as udate, convert(varchar, t.ddate, 20) as ddate ,userimage,userimagestatusfrom t_user twheret.status = 1andt.id = #{id}</select></mapper>

一切都万事大吉了 开始我们最主要的 上传图片并保存到数据库  

页面上的from提交到的servlet 我们根据Spring的注解建立起来 

下面是他的代码  最好你新建一个JAVA文件 我们要把 上传保存 和  读取显示 写在一个里面这样我们用起来 不叫方便也比较好看写 

package com.netmarch.controller;import java.io.*;import java.util.Iterator;import javax.servlet.http.*;import org.apache.log4j.Logger;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Controller;import org.springframework.ui.Model;import org.springframework.web.bind.annotation.*;import org.springframework.web.multipart.*;import org.springframework.web.multipart.commons.CommonsMultipartResolver;import org.springframework.web.servlet.mvc.support.RedirectAttributes;import com.netmarch.bean.User;import com.netmarch.service.UserService;@Controllerpublic class OutImage implements Serializable {private static final long serialVersionUID = -8444308537025394819L;private Logger logger = Logger.getLogger(OutImage.class);@Autowiredprivate UserService userService;/** * 读取数据库文件并且显示 * @param request * @param response * @param session * @return */@RequestMapping("/imageshow")public String userImage(HttpServletRequest request,HttpServletResponse response, HttpSession session) {session = request.getSession(true);        User user=(User) session.getAttribute("user");response.setContentType("image/*"); // 设置返回的文件类型        OutputStream toClient=null;        User user1 =null;try {toClient = response.getOutputStream();         user1 =userService.getUserById(user.getId());         if(user1.getUserimagestatus()==1){         toClient.write(user1.getUserimage());         toClient.close();         }} catch (Exception e) {} return "redirect:/";}/** * 客户端文件保存至数据库 * @param request * @param response * @param session * @param attr * @param model * @return * @throws Exception */@RequestMapping(value = "/addimage", method = RequestMethod.POST)public String login(HttpServletRequest request,HttpServletResponse response, HttpSession session,RedirectAttributes attr, Model model)  { CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(request.getSession().getServletContext()); //获取前台提交图片 session = request.getSession(true);         User user=(User) session.getAttribute("user");//从session中取出当前登录用户if (multipartResolver.isMultipart(request)) // 判断 request// 是否有文件上传,即多部分请求...{MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) (request);Iterator<String> iter = multiRequest.getFileNames();String path = "";// 文件路径while (iter.hasNext()) {MultipartFile file = multiRequest.getFile(iter.next());String fileName = "upload" + file.getOriginalFilename();// 获取文件名称String path1 = request.getSession().getServletContext().getRealPath("/");// 获取服务器的路径path = path1 + "" + fileName;// 拼接文件路径File localFile = new File(path);try {file.transferTo(localFile);// 图片上传至 服务器} catch (IllegalStateException e) {} catch (IOException e) {}}   try {           FileInputStream is = new FileInputStream(path);           int i = is.available(); // 得到文件大小           byte data[] = new byte[i];           is.read(data); //读数据           is.close();           user.setUserimage(data);           userService.insertUserImage(user);           File file =new File(path);           file.delete();//删除上传至服务器的文件   }catch (Exception e) {}       }return "redirect:/user/list";}}

我把代码全贴出来了  

这里 上传 保存 和  读取的时候 要注意他们的 异常的处理

如果你的异常直接 throw  抛出去的 话 有时候后虽然不会影响效果 但是 会报一些莫名其妙的错误 最好还是在代码里面 try一下 这样也有助于你的理解

还有就是 上传到服务器的文件 一定要删除了 不然 会影响你的服务器哦

好了 下面接受图片的就简单了 只需要我们在 HTML加个标签就好了

<img id="imageshow" src="<c:url value='/imageshow'/>" width="100" height="100">

这些路径的请求都是根据spring注解来的 我就不介绍了
这样 项目就完成了 效果 

给你们看看效果

犀利哈