Java實現圖片上傳到伺服器，並把上傳的圖片讀取出來，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 = 1Gsfu.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.jpgString 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 blocke.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>
至此，一個基於Java的頭像上傳伺服器，路徑儲存在MySQL，並在HTML介面讀取出來的功能就基本實現了。頭像上傳之前進行處理等操作，可以選擇一些外掛程式來完成。這裡只是簡單的實現了準系統。
對於圖片上傳，這裡只是簡單的用Servlet實現了一下最基本的功能，僅提供思路。如果使用spring等架構，他都對圖片上傳做了很好的封裝，應該更加容易。
後台實現圖片上傳應該來說比較容易，但是比較頭疼的是圖片上傳原生的按鈕醜出天際，這裡推薦倆實用的上傳控制項，應該算比較好看。
1，H5實現的圖片上傳，可多張上傳，可點擊可拖拽上傳，大概是這個樣子：
基本的使用介紹和：http://blog.csdn.net/weixin_36380516/article/details/70352689
2，jQuery映像裁剪外掛程式，大概長這樣
不僅提供上傳，還有裁剪等功能，UI做的也美，
地址：http://www.jq22.com/jquery-info318
最後，推薦一個公眾號“Java知音”，推送Java相關技術文章，按體系整理，平時零碎時間看看也非常不錯！Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
