本篇内容介绍了“SSM怎么上传图片”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
添加客户时上传图片和客户修改信息都是上传图片。
首先数据库创建一个pic字段，类型为varchar，通过逆向工程重新生成mapper接口和xml文件。
其次，服务层注入mapper接口，调用mapper接口中的add和update方法。
然后，控制器层注入服务接口，使用MultipartFile接受jsp传入的图片，处理后写入客户po类，调用服务方法update和add方法。
最后编写jsp界面，通过js上传的图片显示增加的页面或者改变的页面。表单表单配置提交多部分属性 enctype="multipart/form-data"。
(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 >
dao层使用逆向工程生成mapper接口中的方法和自定义接口方法
(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” ；
}(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 >
<输入类型= "提交"值="提交" />
</表格> <“SSM怎么上传图片”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
