溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
