1 需求

添加客戶時上傳圖片和客戶修改信息是上傳圖片。

2 思路

首先，數據庫創建pic字段，類型為varchar，通過逆向工程重新生成mapper接口和xml文件。

其次，service層注入mapper接口，調用mapper接口中的添加和更新方法。

然后，controller層注入service接口，用MultipartFile接受jsp傳入的圖片，經過處理寫入客戶po類中，調用service的方法更新和添加方法。

最后，編寫jsp界面，通過js將要上傳的圖片顯示添加頁面或更改頁面。Form表單配置提交多部件的屬性enctype="multipart/form-data"。

3 環境准備

3.1 導入所需Jar包

3.2 配置springmvc.xml文件

在頁面form中提交enctype="multipart/form-data"的數據時，需要springmvc對multipart類型的數據進行解析，在springmvc.xml中配置multipart類型解析器

<!-- 文件上傳 -->
   <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
      <!-- 設置上傳文件的最大尺寸為5MB -->
      <property name="maxUploadSize">
         <value>5242880</value>
      </property>
   </bean>

4 dao層

逆向工程參考http://how2j.cn/k/mybatis/mybatis-generator/1376.html

dao層運用逆向工程生成mapper接口中的方法和自定義的接口的方法

參考這篇文章的 https://www.cnblogs.com/peter-hao/p/ssm_custom.html

的dao層

5 service層

參考這篇文章的https://www.cnblogs.com/peter-hao/p/ssm_custom.html 中的service層

6 controller層

參考https://www.cnblogs.com/peter-hao/p/ssm_custom.html 中的controller層，

6.1 修改addCustomSubmit方法

　　@RequestMapping("/addCustomSubmit")
   public String addCustomSubmit(HhCustom hhCustom, MultipartFile custom_pic) throws Exception {
      // 上傳圖片
      // 原始名稱
      String originalFilename = custom_pic.getOriginalFilename();
      if (custom_pic != null && originalFilename != null && originalFilename.length() > 0) {
         // 存儲圖片的物理路徑
         String pic_path = "C:\\Users\\Peter.Hao\\Desktop\\ssm_doc\\image\\";
         // 新的圖片名稱
         String newFileName = UUID.randomUUID() + originalFilename.substring(originalFilename.lastIndexOf("."));
         // 新的圖片(物理路徑+圖片名)
         File newFile = new File(pic_path + newFileName);
         // 將內存中的數據寫到磁盤
         custom_pic.transferTo(newFile);
         // 將圖片加入到HhCustom中
         hhCustom.setPic(newFileName);
      }
      // 調用service更新客戶信息
      customService.addCustom(hhCustom);
      // 重定向
      return "redirect:findAllCustom.action";
   }

6.2 修改updateCustomSubmit方法

　　// 更新客戶信息submit
   @RequestMapping("/updateCustomSubmit")
   public String updateCustomSubmit(Integer id, HhCustom hhCustom, MultipartFile custom_pic) throws Exception {
      // 上傳圖片
      // 原始名稱
      String originalFilename = custom_pic.getOriginalFilename();
      if (custom_pic != null && originalFilename != null && originalFilename.length() > 0) {
         // 存儲圖片的物理路徑
         String pic_path = "C:\\Users\\Peter.Hao\\Desktop\\ssm_doc\\image\\";
         // 新的圖片名稱
         String newFileName = UUID.randomUUID() + originalFilename.substring(originalFilename.lastIndexOf("."));
         // 新的圖片(物理路徑+圖片名)
         File newFile = new File(pic_path + newFileName);
         // 將內存中的數據寫到磁盤
         custom_pic.transferTo(newFile);
         // 將圖片加入到HhCustom中
         hhCustom.setPic(newFileName);
      }
      // 調用service更新客戶信息
      customService.updateCustom(id, hhCustom);
      return "redirect:findAllCustom.action";
   }

7 jsp頁面

7.1 customlist.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
   pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function addCustom(){
document.customForm.action="${pageContext.request.contextPath}/addCustom.action";
   document.customForm.submit();
}
</script>
<title>客戶列表</title>
</head>
<body>
   <form name="customForm"    action="${pageContext.request.contextPath}/findAllCustom.action"      method="post">
      查詢條件：
      <table width="100%" border=1>
         <tr>
            <td>客戶名稱：<input name="hhCustom.name" />
            </td>
            <td>客戶類型： <select name="hhCustom.category">
                   <option selected="selected"></option>
                   <c:forEach items="${customTypes}" var="customType">
                      <option value="${customType.value }">${customType.value}</option>
                   </c:forEach>
            </select>
            </td>
            <td><button type="submit" value="查詢" >查詢</button></td>
            <td><input type="button" value="添加客戶" onclick="addCustom()"/></td>
         </tr>
      </table>
      客戶列表：
      <table width="100%" border=1>
         <tr>
            <!-- <th>選擇</th>  -->
            <th>客戶名稱</th>
            <th>客戶郵箱</th>
            <th>客戶電話</th>
            <th>客戶類型</th>
            <th>客戶頭像</th>
            <th>操作</th>
         </tr>
         <c:forEach items="${customlist}" var="custom">
            <tr>
                <%-- <td><input type="checkbox" name="custom_id" value="${custom.id}" /></td> --%>
                <td>${custom.name }</td>
                <td>${custom.mail }</td>
                <td>${custom.phoneNumber }</td>
                <td>${custom.category }</td>
                <td align="center"><img src="/pic/${custom.pic }" width="100px" height="100px"/></td>
               <%--<td><fmt:formatDate value="${custom.birthday }" pattern="yyyy-MM-dd HH:mm:ss"/></td>--%>
                <td><a href="${pageContext.request.contextPath }/updateCustom.action?id=${custom.id }">修改</a>
                   <a href="${pageContext.request.contextPath }/deleteCustom.action?id=${custom.id }">刪除</a>
                </td>
            </tr>
         </c:forEach>
      </table>
   </form>
</body>
</html>

7.2 add_custom.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
   pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function showImg(thisimg) {
   var file = thisimg.files[0];
   if(window.FileReader) {
      var fr = new FileReader(); 
      var showimg = document.getElementById('showimg');
      fr.onloadend = function(e) {
      showimg.src = e.target.result;
   };
   fr.readAsDataURL(file);
   showimg.style.display = 'block';
   }
}
</script>
<title>添加客戶</title>
</head>
<body>
   <form id="customForm"     action="${pageContext.request.contextPath}/addCustomSubmit.action"
      method="post" enctype="multipart/form-data">
      添加客戶信息：
      <table width="100%" border=1>
         <tr>
            <td>客戶名稱</td>
            <td><input type="text" name="name" /></td>
         </tr>
         <tr>
            <td>客戶郵箱</td>
            <td><input type="text" name="mail" /></td>
         </tr>
         <tr>
            <td>客戶電話號碼</td>
            <td><input type="text" name="phoneNumber" /></td>
         </tr>
         <tr>
            <td>客戶類型</td>
            <td><select name="category">
                   <c:forEach items="${customTypes}" var="customType">
                      <%-- <option value="${customType.key }">${customType.value}</option> --%>
                      <option value="${customType.value }">${customType.value}</option>
                   </c:forEach>
            </select></td>
         </tr>
         <tr>
            <td>客戶頭像</td>
            <td><img id="showimg" src="" style="display:none;" />
               <input type="file" name="custom_pic" onchange="showImg(this)"/>
                </td>
         </tr>
      </table>
      <input type="submit" value="提交"> <input type="reset"
         value="重置">
   </form>
</body>
</html>

7.3 update_custom.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
   pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function showImg(thisimg) {
   document.getElementById("img_old").style.display="none";
   var file = thisimg.files[0];
   if(window.FileReader) {
      var fr = new FileReader();
      var showimg = document.getElementById('showimg');
      fr.onloadend = function(e) {
      showimg.src = e.target.result;
   };
   fr.readAsDataURL(file);
   showimg.style.display = 'block';
   }
}
</script>
<title>修改客戶信息</title>
</head>
<body>
   <form name="customForm"
 action="${pageContext.request.contextPath}/updateCustomSubmit.action"
      method="post" enctype="multipart/form-data">
      <input type="hidden" name="id" value="${hhCustom.id }" /> 修改客戶信息：
      <table width="100%" border=1>
         <tr>
            <td>客戶名稱</td>
           <td><input type="text" name="name" value="${hhCustom.name }" /></td>
         </tr>
         <tr>
            <td>客戶郵箱</td>
           <td><input type="text" name="mail" value="${hhCustom.mail }" /></td>
         </tr>
         <tr>
            <td>客戶電話號碼</td>
            <td><input type="text" name="phoneNumber"
                value="${hhCustom.phoneNumber }" /></td>
         </tr>
         <tr>
            <td>客戶類型</td>
            <td><select name="category">
                  <c:forEach items="${customTypes}" var="customType">
                     <%-- <option value="${customType.key }">${customType.value}</option> --%>
                     <c:if test="${hhCustom.category==customType.value }">
                        <option value="${customType.value }" selected="selected">${customType.value }</option>
                      </c:if>
                     <option value="${customType.value }">${customType.value}</option>
                   </c:forEach>
            </select></td>
         </tr>
         <tr>
            <td>客戶頭像</td>
            <td><c:if test="${hhCustom.pic!=null }">
                  <img id="img_old" src="/pic/${hhCustom.pic }" width="100" height="100" />                     
                </c:if>
                <img id="showimg" src="" style="display:none;" width="100" height="100"/>
               <input type="file" name="custom_pic" onchange="showImg(this)"/>          
            </td>              
         </tr>
      </table>
      <input type="submit" value="提交"/>  
   </form>
</body>
</html>

8 結果展示

8.1 添加客戶

8.2 更新客戶

8.3 數據庫

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 MySQL+SSM+Ajax上傳圖片問題 Java后端開發-SSM框架的圖片上傳使用SSM框架將圖片上傳到本地服務器在SSM框架中如何將圖片上傳到數據庫中圖片上傳 SSM框架中使用文件上傳的示例 SSM簡單實現文件上傳和下載 Excel表格上傳（layui+SSM） SSM實現文件上傳功能（全） asp.net上傳圖片，上傳圖片