文件/图片上传功能，简单总结如下
1.引入ajaxfileupload.js
注意：该文件需要在引入Jquery之后引入
下载链接：https://i.cnblogs.com/Files.aspx
2.colModel中文件上传name设置
{name:'cover',index:'cover',edittype:"file",editable:true,editoptions: {enctype: "multipart/form-data"},
formatter:function (value,option,rows) {
return "<img style='30%;height:10s%;' src='${pageContext.request.contextPath}/image/"+rows.cover+"'/>";
}},
3.前台编码
1 <%@page pageEncoding="UTF-8" contentType="text/html; utf-8" isELIgnored="false" %> 2 <html> 3 <link rel="stylesheet" href="statics/boot/css/bootstrap.css" type="text/css"> 4 <link rel="stylesheet" href="statics/jqgrid/css/trirand/ui.jqgrid-bootstrap.css" type="text/css"> 5 <script src="statics/boot/js/jquery-2.2.1.min.js" type="text/javascript"></script> 6 <script src="statics/boot/js/bootstrap.min.js" type="text/javascript"></script> 7 <script src="statics/jqgrid/js/trirand/i18n/grid.locale-cn.js" type="text/javascript"></script> 8 <script src="statics/jqgrid/js/trirand/jquery.jqGrid.min.js" type="text/javascript"></script> 9 <script src="statics/jqgrid/js/ajaxfileupload.js" type="text/javascript"></script> 10 11 <script> 12 $(function () { 13 $('#tt').jqGrid({ 14 url:'${pageContext.request.contextPath}banner/showBanners', 15 datatype:'json', 16 styleUI:'Bootstrap', 17 //cellEdit:true, 18 multiselect:true, 19 colNames:['编号', '名称', '图片', '描述', '状态','创建时间'], 20 collEdit:true, 21 colModel:[ 22 {name:"id",align:'center',hidden:true}, 23 {name:'title',align:'center',editable:true}, 24 {name:'cover',index:'cover',edittype:"file",editable:true,editoptions: {enctype: "multipart/form-data"}, 25 formatter:function (value,option,rows) { 26 return "<img style='30%;height:10s%;' " + 27 "src='${pageContext.request.contextPath}/image/"+rows.cover+"'/>";}}, 28 {name:'description',align:'center',editable:true}, 29 {name:'status',align:'center',editable:true,edittype:"select", 30 editoptions:{value:"正常:正常;冻结:冻结"}}, 31 {name:'create_date',align:'center',formatter:"date",formatoptions:{scrformat:'Y-m-d H:i:s',newformat:'Y-m-d'}} 32 //格式化参考：http://www.cnblogs.com/hxling/archive/2010/10/10/1847334.html 33 ], 34 pager:'#pager', 35 autotrue, 36 height:'60%', 37 rowNum : 3, 38 rowList : [2,3,4,5], 39 caption : "轮播图的详细信息", 40 editurl:'${pageContext.request.contextPath}/banner/oper',//设置编辑表单提交路径 41 viewrecords : true, 42 //recreateForm: true确保每添加或编辑表单是重新创建。 43 }).navGrid('#pager',{edit : true,add : true,del : true,search:false}, 44 45 { 46 jqModal:true,closeAfterAdd: true,recreateForm:true,onInitializeForm : function(formid){ 47 $(formid).attr('method','POST'); 48 $(formid).attr('action',''); 49 $(formid).attr('enctype','multipart/form-data'); 50 }, 51 afterSubmit:function (response) { 52 var status = response.responseJSON.status; 53 var id = response.responseJSON.message; 54 alert("确认修改") 55 if(status){ 56 $.ajaxFileUpload({ 57 url:"${pageContext.request.contextPath}/banner/upload", 58 fileElementId:"cover", 59 data:{id:id}, 60 type:"post", 61 success:function () { 62 $("#tt").trigger("reloadGrid") 63 } 64 }); 65 } 66 } 67 }, 68 69 { 70 jqModal:true,closeAfterEdit: true,recreateForm:true,onInitializeForm : function(formid){ 71 $(formid).attr('method','POST'); 72 $(formid).attr('action',''); 73 $(formid).attr('enctype','multipart/form-data'); 74 }, 75 afterSubmit:function (response) { 76 var status = response.responseJSON.status; 77 var id = response.responseJSON.message; 78 alert("确认添加") 79 if(status){ 80 $.ajaxFileUpload({ 81 url:"${pageContext.request.contextPath}/banner/upload", 82 fileElementId:"cover", 83 data:{id:id}, 84 type:"post", 85 success:function () { 86 $("#tt").trigger("reloadGrid") 87 } 88 }); 89 } 90 } 91 } 92 ); 93 }) 94 </script> 95 <body> 96 <table id="tt"></table> 97 <div id="pager" style="height: 30px"></div> 98 </body> 99 </html>
4.后台编码
1 public void upload(String id, MultipartFile cover) throws IOException { 2 //需要在submit之后进行一次图片路径的修改 3 Banner banner = new Banner(); 4 log.info("上传图片的原始名字"+cover.getOriginalFilename()); 5 String realPath =httpSession.getServletContext().getRealPath("image"); 6 cover.transferTo(new File(realPath,cover.getOriginalFilename())); 7 banner.setId(id); 8 banner.setCover(cover.getOriginalFilename()); 9 bannerDAO.updateByPrimaryKeySelective(banner); 10 }