JQGrid之文件上传

文件/图片上传功能，简单总结如下

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     }

后台代码