專注Java教育14年
全國咨詢/投訴熱線：400-8080-105
更新時間：2022-01-14 10:19:17 來源：動力節點 瀏覽1486次
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 >
<輸入類型= "提交"值="提交" />
</表格>
<
(1)添加客戶
(2)更新客戶
(3)數據庫
Java實驗班
0基礎 0學費 15天面授
Java就業班
有基礎 直達就業
Java夜校直播班
業余時間 高薪轉行
Java在職加薪班
工作1~3年，加薪神器
Java架構師班
工作3~5年，晉升架構
提交申請后，顧問老師會電話與您溝通安排學習
官方微信
官方抖音
京公網安備 11030102010736號