File / image upload feature, simply summarized as follows
1. The introduction of ajaxfileupload.js
Note: This file needs to be introduced after the introduction of Jquery
Download link: https: //i.cnblogs.com/Files.aspx
2.colModel name in the file upload settings
{name:'cover',index:'cover',edittype:"file",editable:true,editoptions: {enctype: "multipart/form-data"},
formatter:function (value,option,rows) {
return "<img style='width:30%;height:10s%;' src='${pageContext.request.contextPath}/image/"+rows.cover+"'/>";
}},
3. Reception encoding
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 6 <script src="statics/boot/js/jquery-2.2.1.min.js" type="text/javascript"></script> 7 <script src="statics/boot/js/bootstrap.min.js" type="text/javascript"></script> 8 <script src="statics/jqgrid/js/trirand/i18n/grid.locale-cn.js" type="text/javascript"></script> 9 <script src="statics/jqgrid/js/trirand/jquery.jqGrid.min.js" type="text/javascript"></script> 10 <script src="statics/jqgrid/js/ajaxfileupload.js" type="text/javascript"></script> 11 12 <script> 13 $(function () { 14 $('#tt').jqGrid({ 15 url:'${pageContext.request.contextPath}banner/showBanners', 16 datatype:'json', 17 styleUI:'Bootstrap', 18 //cellEdit:true, 19 multiselect:true, 20 colNames: [ 'number', 'name', 'image', 'Description', 'state', 'creation time' ], 21 is collEdit: to true , 22 is colModel: [ 23 is {name: "ID", align = left: 'Center ', hidden: to true }, 24 {name:' title ', align = left:' Center ', the editable: to true }, 25 {name:' Cover ', index:' Cover ', EditType: "File", the editable: to true , editoptions: {the enctype: "multipart / form-Data" }, 26 is Formatter: function (value, Option, rows) { 27 return "<img style='width:30%;height:10s%;' 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 ], 33 pager:'#pager', 34 autowidth:true, 35 height: '60% ' , 36 rowNum:. 3 , 37 [ rowList: [2,3,4,5 ], 38 is Caption: "Details of the carousel of FIG." , 39 editUrl:' $ {pageContext.request.contextPath } / Banner / Oper ', // set the edit form submission path 40 viewrecords: to true , 41 is .}) navGrid (' # pager ', {edit: to true , the Add: to true , del: to true , Search: to false }, 42 is 43 is { 44 is jqModal:true,closeAfterAdd: true,recreateForm:true,onInitializeForm : function(formid){ 45 $(formid).attr('method','POST'); 46 $(formid).attr('action',''); 47 $(formid).attr('enctype','multipart/form-data'); 48 }, 49 afterSubmit:function (response) { 50 var status = response.responseJSON.status; 51 var id = response.responseJSON.message; 52 alert("Confirm the changes") 53 if(status){ 54 $.ajaxFileUpload({ 55 url:"${pageContext.request.contextPath}/banner/upload", 56 fileElementId:"cover", 57 data:{id:id}, 58 type:"post", 59 success:function () { 60 $("#tt").trigger("reloadGrid") 61 } 62 }); 63 } 64 } 65 }, 66 67 { 68 jqModal:true,closeAfterEdit: true,recreateForm:true,onInitializeForm : function(formid){ 69 $(formid).attr('method','POST'); 70 $(formid).attr('action',''); 71 $(formid).attr('enctype','multipart/form-data'); 72 }, 73 afterSubmit:function (response) { 74 var status = response.responseJSON.status; 75 var id = response.responseJSON.message; 76 alert("确认添加") 77 if(status){ 78 $.ajaxFileUpload({ 79 url:"${pageContext.request.contextPath}/banner/upload", 80 fileElementId:"cover", 81 data:{id:id}, 82 type:"post", 83 success:function () { 84 $ ( "# TT") Trigger ( "reloadGrid." ) 85 } 86 }); 87 } 88 } 89 } 90 ); 91 is }) 92 </ Script> 93 <body> 94 <Table ID = "TT"> </ Table> 95 <div ID = "pager" style = "height: 30px"> </ div> 96 </ body> 97 </ HTML>//recreateForm: trueensure that each add or edit form is re-created.
4. Background encoding
public void the Upload (String the above mentioned id, MultipartFile Cover) throws IOException {
// need to modify the path of a picture after the Submit Banner Banner = new new Banner (); log.info ( "upload image's original name" + cover.getOriginalFilename () ); String realpath = httpSession.getServletContext () getRealPath ( "Image." ); cover.transferTo ( new new File (realpath, cover.getOriginalFilename ())); banner.setId (the above mentioned id); banner.setCover (cover.getOriginalFilename ( )); bannerDAO.updateByPrimaryKeySelective (Banner); }