專案框架是 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>
 

<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="";   
		}
} 
 

前臺好了 我們說說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;
	}
}

好了 我們在處理我們的介面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>}

public void insertUserImage(User user);

public User getUserById(int id);

<?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=1
		where 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 t
		WHERE  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,userimagestatus
		from 
			t_user t
		where
			t.status = 1
		and
			t.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;
@Controller
public class OutImage implements Serializable {
	private static final long serialVersionUID = -8444308537025394819L;
	private Logger logger = Logger.getLogger(OutImage.class);
	@Autowired
	private 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">

給你們看看效果

犀利哈