首页 > Hot资讯 > 正文

SSM图片上传的方法

2022-01-14 10:19:17
1326次极悦

SSM图片上传的方法是什么？小编来告诉大家。

1.需求

添加客户时上传图片和客户修改信息都是上传图片。

2.想法

首先数据库创建一个pic字段，类型为varchar，通过逆向工程重新生成mapper接口和xml文件。

其次，服务层注入mapper接口，调用mapper接口中的add和update方法。

然后，控制器层注入服务接口，使用MultipartFile接受jsp传入的图片，处理后写入客户po类，调用服务方法update和add方法。

最后编写jsp界面，通过js上传的图片显示增加的页面或者改变的页面。表单表单配置提交多部分属性 enctype="multipart/form-data"。

3.环境准备

(1)导入需要的Jar包

(2)配置springmvc.xml文件

在页面表单中提交enctype="multipart/form-data"的数据时，需要springmvc解析multipart类型的数据，multipart类型解析器在springmvc.xml中配置

<!--文件上传  --> 
   < bean id ="multipartResolver" class ="org.springframework.web.multipart.commons.CommonsMultipartResolver" > 
      <!--  设置上传文件最大大小为5MB --> 
      <属性名=“maxUploadSize” > 
         < value > 5242880 </ value > 
      </ property > 
   </ bean >

4.dao层

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

5.服务层

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 );
         //  将内存中的数据写入磁盘
         custom_pic.transferTo(newFile);
         //  添加图片到 HhCustom
         hhCustom.setPic(newFileName);
      }
      //  调用服务更新客户信息
      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 );
         //  将内存中的数据写入磁盘
         custom_pic.transferTo(newFile);
         //  添加图片到 HhCustom
         hhCustom.setPic(newFileName);
      }
      //  调用服务更新客户信息
      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"> 
                      <选项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"内容="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 = 函数(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 = “多部分/表单数据” >
             添加客户信息：
      < 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 >客户电话号码</ td > 
            < td >< input type ="text" name ="phoneNumber"  /></ td > 
         </ tr > 
         < tr > 
            < td >客户类型</ td > 
            < td ><选择名称="category" > 
                   < c:forEach items ="${customTypes}"var =“自定义类型” > 
                      <%--  <选项值= " ${customType.key } " > ${customType.value} </选项>  -- %> 
                      <选项值= "${customType.value }" > ${customType.value} </ option > 
                   </ c:forEach > 
            </ select ></ td > 
         </ tr > 
         < tr > 
            < td >客户头像</ td > 
            < td > <身份证号="showimg" src =""风格="显示：无；"  /> 
               < 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 = 函数(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 >客户电话号码</ 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 > 
                     <期权价值="${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 > 
      <输入类型= "提交"值="提交" />   
   </表格> 
<