SSM怎么上傳圖片

發(fā)布時(shí)間：2022-09-30 10:24:20 來源：億速云閱讀：124 作者：iii 欄目：開發(fā)技術(shù)

本篇內(nèi)容介紹了“SSM怎么上傳圖片”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

1.需求

添加客戶時(shí)上傳圖片和客戶修改信息都是上傳圖片。

2.想法

首先數(shù)據(jù)庫創(chuàng)建一個(gè)pic字段，類型為varchar，通過逆向工程重新生成mapper接口和xml文件。

其次，服務(wù)層注入mapper接口，調(diào)用mapper接口中的add和update方法。

然后，控制器層注入服務(wù)接口，使用MultipartFile接受jsp傳入的圖片，處理后寫入客戶po類，調(diào)用服務(wù)方法update和add方法。

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

3.環(huán)境準(zhǔn)備

(1)導(dǎo)入需要的Jar包

SSM怎么上傳圖片

(2)配置springmvc.xml文件

在頁面表單中提交enctype="multipart/form-data"的數(shù)據(jù)時(shí)，需要springmvc解析multipart類型的數(shù)據(jù)，multipart類型解析器在springmvc.xml中配置

<!--文件上傳  --> 
   < bean id ="multipartResolver" class ="org.springframework.web.multipart.commons.CommonsMultipartResolver" > 
      <!--  設(shè)置上傳文件最大大小為5MB --> 
      <屬性名=“maxUploadSize” > 
         < value > 5242880 </ value > 
      </ property > 
   </ bean >

4.dao層

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

5.服務(wù)層

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\\" ;         //  新圖片名稱
         字符串newFileName = UUID.randomUUID() + originalFilename.substring(originalFilename.lastIndexOf("." ));         //  新建圖片（物理路徑+圖片名）
         File newFile = new File(pic_path + newFileName );         //  將內(nèi)存中的數(shù)據(jù)寫入磁盤
         custom_pic.transferTo(newFile);         //  添加圖片到 HhCustom
         hhCustom.setPic(newFileName);
      }      //  調(diào)用服務(wù)更新客戶信息
      customService.addCustom(hhCustom);      //  重定向
      return "redirect:findAllCustom.action" ;
   }

(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 );         //  將內(nèi)存中的數(shù)據(jù)寫入磁盤
         custom_pic.transferTo(newFile);         //  添加圖片到 HhCustom
         hhCustom.setPic(newFileName);
      }      //  調(diào)用服務(wù)更新客戶信息
      customService.updateCustom(id, hhCustom);
      返回“重定向：findAllCustom.action” ；
   }

7.jsp頁面

(1)自定義列表.jsp

<% @頁面語言= " java " contentType = " text/html;charset=UTF-8 " 
   pageEncoding = " UTF-8 " %> 
<% @taglib uri = " http://java.sun.com/jsp/ jstl/core "前綴= " c " %> <% @taglib uri = " http://java.sun.com/jsp/jstl/fmt "前綴= " 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"> 
                      <選項(xiàng)value ="${customType.value }" > ${customType.value} </ option > 
                   </ c:forEach > 
            </ select > 
            </ td > 
            < td >< button type ="submit" value ="Query"  >查詢</ button ></ td > 
            < td >< input type ="button" value ="Add customer" onclick ="addCustom()" /></ td > 
         </ tr > 
      </表>
             客戶名單： 
      < 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 } "模式= “ 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 > </正文> </ html >

(2)添加_custom.jsp

<% @頁面語言= " java " contentType = " text/html;charset=UTF-8 " 
   pageEncoding = " UTF-8 " %> 
<% @taglib uri = " http://java.sun.com/jsp/ jstl/core "前綴= " c " %> <% @taglib uri = " http://java.sun.com/jsp/jstl/fmt "前綴= " 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"內(nèi)容="text/html; charset=UTF-8" > <腳本類型="text/javascript" > function showImg(thisimg) {
    var file = thisimg.files[ 0 ];
   if (window.FileReader) {
       var fr =  new FileReader(); 
      document.getElementById( ' showimg ' );
      fr.onloadend = 函數(shù)(e) {
      showimg.src = e.target.result;
   };
   fr.readAsDataURL(文件);
   showimg.style.display =  '塊' ;
   }
}</ script > < title >添加客戶</ title > </ head > < body > 
   < form id ="customForm"      action ="${pageContext.request.contextPath}/addCustomSubmit.action" 
      method ="post" enctype = “多部分/表單數(shù)據(jù)” >
             添加客戶信息：      < table width ="100%"邊框=1 > 
         < tr > 
            < td >客戶姓名</ td > 
            < td >< input type ="text" name ="name"  /></ td > 
         </ tr > 
         < tr > 
            < td >客戶郵箱</ td > 
            < td >< input type ="text" name ="郵件”  /></ td > 
         </tr > 
         < tr > 
            < td >客戶電話號(hào)碼</ td > 
            < td >< input type ="text" name ="phoneNumber"  /></ td > 
         </ tr > 
         < tr > 
            < td >客戶類型</ td > 
            < td ><選擇名稱="category" > 
                   < c:forEach items ="${customTypes}"var =“自定義類型” > 
                      <%--  <選項(xiàng)值= " ${customType.key } " > ${customType.value} </選項(xiàng)>  -- %> 
                      <選項(xiàng)值= "${customType.value }" > ${customType.value} </ option > 
                   </ c:forEach > 
            </ select ></ td > 
         </ tr > 
         < tr > 
            < td >客戶頭像</ td > 
            < td > <身份證號(hào)="showimg" src =""風(fēng)格="顯示：無；"  /> 
               < input type ="file" name ="custom_pic" onchange ="showImg(this)" /> 
                </ td > 
         </ tr > 
      </ table > 
      < input type ="submit" value ="Submit" >  <輸入類型="reset"
         值="Reset" > 
   </ form > <

(3)update_custom.jsp

<% @頁面語言= " java " contentType = " text/html;charset=UTF-8 " 
   pageEncoding = " UTF-8 " %> 
<% @taglib uri = " http://java.sun.com/jsp/ jstl/core "前綴= " c " %> <% @taglib uri = " http://java.sun.com/jsp/jstl/fmt "前綴= " 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文件= thisimg.files[ 0 ];
   if (window.FileReader) {
       var fr =  new FileReader();
      var showimg = document.getElementById( ' showimg ' );
      fr.onloadend = 函數(shù)(e) {
      showimg.src = e.target.result;
   };
   fr.readAsDataURL(文件);
   showimg.style.display =  '塊' ;
   }
}</ 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 }"  />  修改客戶信息：       <表格寬度=“100%”邊框=1 > 
         < tr > 
            < td >客戶名字</ td > 
           < td ><輸入類型="text" name ="name" value ="${hhCustom.name}"  /></ td > 
         </ tr > 
         < tr > 
            < td >客戶郵箱</ td > 
           < td ><輸入類型=“文本”名稱=“郵件”value ="${hhCustom.mail }"  /></td > 
         </ tr > 
         < tr > 
            < td >客戶電話號(hào)碼</ td > 
            < td >< input type ="text" name ="phoneNumber" 
                value ="${hhCustom.phoneNumber}"  /></ td > 
         </ tr > 
         < tr > 
            < td >客戶類型</ td > 
            < td >< select name ="類別" > 
                  < c:forEachitems ="${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 > 
                     <期權(quán)價(jià)值="${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" /> 
               <輸入類型="文件"名稱="custom_pic" onchange ="showImg(this)" />           
            </ td >               
         </ tr > 
      </ table > 
      <輸入類型= "提交"值="提交" />   
   </表格> <

“SSM怎么上傳圖片”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

向AI問一下細(xì)節(jié)

SSM怎么上傳圖片

1.需求

2.想法

3.環(huán)境準(zhǔn)備

4.dao層

5.服務(wù)層

6.控制器層

7.jsp頁面

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽