Java實現圖片上傳到伺服器，並把上傳的圖片讀取出來

在很多的網站都可以實現上傳頭像，可以選擇自己喜歡的圖片做頭像，從本地上傳，下次登入時可以直接顯示出已經上傳的頭像，那麼這個是如何實現的呢？

下面說一下我的實現過程(只是個人實現思路，實際網站怎麼實現的不太清楚)

實現的思路：

工具：MySQL，eclipse

首先，在MySQL中建立了兩個表，一個t_user表，用來存放使用者名稱，密碼等個人資訊，

一個t_touxiang表，用來存放上傳的圖片在伺服器中的存放路徑，以及圖片名字和使用者ID，

T_touxiang表中的使用者ID對應了t_user中的id。

t_user表SQL：

DROP TABLE IF EXISTS `t_user`;
CREATE TABLE `t_user` (
  `id` int(10) NOT NULL AUTO_INCREMENT,
  `username` varchar(20) NOT NULL,
  `password` varchar(255) NOT NULL,
  PRIMARY KEY (`id`),
  UNIQUE KEY `username` (`username`)
) ENGINE=InnoDB AUTO_INCREMENT=22 DEFAULT CHARSET=utf8;

T_touxiang表SQL：

DROP TABLE IF EXISTS `t_touxiang`;
CREATE TABLE `t_touxiang` (
  `id` int(10) NOT NULL AUTO_INCREMENT,
  `image_path` varchar(255) DEFAULT NULL,
  `user_id` int(11) DEFAULT NULL,
  `old_name` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`id`),
  KEY `img_user` (`user_id`),
  CONSTRAINT `img_user` FOREIGN KEY (`user_id`) REFERENCES `t_user` (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8;

首先，寫一個UploadServlet.java，用來處理圖片檔案的上傳，並將圖片路徑，圖片名稱等資訊存放到t_touxiang資料表中，程式碼如下：

@WebServlet("/UploadServlet.do")
public class UploadServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
 
    protected void service(HttpServletRequest request, HttpServletResponse response)
	    throws ServletException, IOException {
	// 判斷上傳表單是否為multipart/form-data型別
	HttpSession session = request.getSession();
	User user = (User) session.getAttribute("user"); // 在登入時將 User 物件放入了 會話
						 // 中
 
	if (ServletFileUpload.isMultipartContent(request)) {
 
	    try {
		// 1. 建立DiskFileItemFactory物件，設定緩衝區大小和臨時檔案目錄
		DiskFileItemFactory factory = new DiskFileItemFactory();
		// System.out.println(System.getProperty("java.io.tmpdir"));//預設臨時資料夾
 
		// 2. 建立ServletFileUpload物件，並設定上傳檔案的大小限制。
		ServletFileUpload sfu = new ServletFileUpload(factory);
		sfu.setSizeMax(10 * 1024 * 1024);// 以byte為單位 不能超過10M 1024byte =
						 // 1kb 1024kb=1M 1024M = 1G
		sfu.setHeaderEncoding("utf-8");
 
		// 3.
		// 呼叫ServletFileUpload.parseRequest方法解析request物件，得到一個儲存了所有上傳內容的List物件。
		@SuppressWarnings("unchecked")
		List<FileItem> fileItemList = sfu.parseRequest(request);
		Iterator<FileItem> fileItems = fileItemList.iterator();
 
		// 4. 遍歷list，每迭代一個FileItem物件，呼叫其isFormField方法判斷是否是上傳檔案
		while (fileItems.hasNext()) {
		    FileItem fileItem = fileItems.next();
		    // 普通表單元素
		    if (fileItem.isFormField()) {
			String name = fileItem.getFieldName();// name屬性值
			String value = fileItem.getString("utf-8");// name對應的value值
 
			System.out.println(name + " = " + value);
		    }
		    // <input type="file">的上傳檔案的元素
		    else {
			String fileName = fileItem.getName();// 檔名稱
			System.out.println("原檔名：" + fileName);// Koala.jpg
 
			String suffix = fileName.substring(fileName.lastIndexOf('.'));
			System.out.println("副檔名：" + suffix);// .jpg
 
			// 新檔名（唯一）
			String newFileName = new Date().getTime() + suffix;
			System.out.println("新檔名：" + newFileName);// image\1478509873038.jpg
 
			// 5. 呼叫FileItem的write()方法，寫入檔案
			File file = new File("D:/lindaProjects/mySpace/wendao/WebContent/touxiang/" + newFileName);
			System.out.println(file.getAbsolutePath());
			fileItem.write(file);
 
			// 6. 呼叫FileItem的delete()方法，刪除臨時檔案
			fileItem.delete();

			/*
			 * 儲存到資料庫時注意 1.儲存原始檔名稱 Koala.jpg 2.儲存相對路徑
			 * image/1478509873038.jpg
			 * 
			 */
			if (user != null) {
			    int myid = user.getId();
			    String SQL = "INSERT INTO t_touxiang(image_path,user_id,old_name)VALUES(?,?,?)";
			    int rows = JdbcHelper.insert(SQL, false, "touxiang/" + newFileName, myid, fileName);
			    if (rows > 0) {
				session.setAttribute("image_name", fileName);
				session.setAttribute("image_path", "touxiang/" + newFileName);
				response.sendRedirect(request.getContextPath() + "/upImage.html");
			    } else {
 
			    }
 
			} else {
			    session.setAttribute("loginFail", "請登入");
			    response.sendRedirect(request.getContextPath() + "/login.html");
			}
 
		    }
		}
	    } catch (FileUploadException e) {
		e.printStackTrace();
	    } catch (Exception e) {
		e.printStackTrace();
	    }
	}
    }
}

在完成圖片上傳並寫入資料庫的同時，將圖片路徑通過session的方式傳送到HTML介面

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>更換頭像</title>
</head>
<body>
<formaction="UploadServlet.do" method="post"enctype="multipart/form-data">
本地目錄：<inputtype="file" name="uploadFile">
<img src="${image_path}" width="200" height="200">
<inputtype="submit" value="上傳頭像"/>
</form>
</body>
</html>

至此，圖片上傳資料庫和本地伺服器已經實現，那麼如何在HTML介面顯示出個人資訊以及上傳的頭像呢？

首先定義一個PersonServlet類，用來讀取資料庫的內容，併傳送到HTML介面。

程式碼如下：

@WebServlet("/persons.do")
public class PersonServlet extends HttpServlet {
 
    private static final long serialVersionUID = -800352785988546254L;
 
    protected void service(HttpServletRequest request, HttpServletResponse response)
	    throws ServletException, IOException {
	// 判斷上傳表單是否為multipart/form-data型別
	Touxiang tx=null;
	
	HttpSession session = request.getSession();
	User user = (User) session.getAttribute("user"); // 在登入時將 User 物件放入了 會話
	if(user!=null){
	    int myid=user.getId();
	    String SQL="SELECT id,image_path,old_name FROM t_touxiang WHERE user_id=?";
	    ResultSet rs=JdbcHelper.query(SQL,myid);
	    String uSQL="SELECT username,password FROM t_user WHERE id=?";
	    ResultSet urs=JdbcHelper.query(uSQL,myid);
	    System.out.println( "我的個人id是: " + myid);
	    final List<Touxiang> touxiang=new ArrayList<>();
	    try {
		if(rs.next())
		{
		    tx=new Touxiang();
		    tx.setId(rs.getInt(1));
		    tx.setImage_path(rs.getString(2));
		    tx.setOld_name(rs.getString(3));
		    touxiang.add(tx);
		}
		if(urs.next()){
		    user.setUsername(urs.getString(1));
		    user.setPassword(urs.getString(2));
		    user.setTouxiang(touxiang);
		}
		
	    } catch (SQLException e) {
		// TODO Auto-generated catch block
		e.printStackTrace();
	    }
	   
		session.setAttribute("user", user);
		System.out.println( "我的id: " + myid);
		response.sendRedirect( request.getContextPath() + "/person.html");
	}
    }
}

在HTML介面接收資訊，並顯示出來，程式碼如下：

<div>
<form action="UploadServlet.do" method="post" enctype="multipart/form-data">
         <div><a href="$path/upImage.html">更換頭像</a></div>
        
        #foreach( $ut in  $user.getTouxiang() )
         <img src=" $ut.getImage_path()"  width="200" height="200">
         #end
         <div>我的頭像：</div>
         <div>我的姓名：$user.getUsername()</div>
         <div><a href="$path/myAnswer.do">我的解答</a></div>
  <div><a href="$path/myQuestion.do">我的提問</a></div>
   </form>
</div>
<div>
<form action="UploadServlet.do" method="post" enctype="multipart/form-data">
         <div><a href="$path/upImage.html">更換頭像</a></div>
        
        #foreach( $ut in  $user.getTouxiang() )
         <img src=" $ut.getImage_path()"  width="200" height="200">
         #end
         <div>我的頭像：</div>
         <div>我的姓名：$user.getUsername()</div>
         <div><a href="$path/myAnswer.do">我的解答</a></div>
  <div><a href="$path/myQuestion.do">我的提問</a></div>
   </form>
</div>

至此，一個基於Java的頭像上傳伺服器，路徑儲存在MySQL，並在HTML介面讀取出來的功能就基本實現了。頭像上傳之前進行處理等操作，可以選擇一些外掛來完成。這裡只是簡單的實現了基本功能。

補充
對於圖片上傳，這裡只是簡單的用Servlet實現了一下最基本的功能，僅提供思路。如果使用spring等框架，他都對圖片上傳做了很好的封裝，應該更加容易。

後臺實現圖片上傳應該來說比較容易，但是比較頭疼的是圖片上傳原生的按鈕醜出天際，這裡推薦倆實用的上傳控制元件，應該算比較好看。

1，H5實現的圖片上傳，可多張上傳，可點選可拖拽上傳，大概是這個樣子：

2，jQuery影像裁剪外掛，大概長這樣

不僅提供上傳，還有裁剪等功能，UI做的也美，

地址：http://www.jq22.com/jquery-info318

需要 demo 原始碼的，加我微訊號：xttblog，備註：demo。我發你們。

 我的個人小程式和公眾號！