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

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='width: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 
  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:['编号', '名称', '图片', '描述', '状态','创建时间'],
 21             collEdit:true,
 22             colModel:[
 23                 {name:"id",align:'center',hidden:true},
 24                 {name:'title',align:'center',editable:true},
 25                 {name:'cover',index:'cover',edittype:"file",editable:true,editoptions: {enctype: "multipart/form-data"},
 26                     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'}
 32             ],
 33             pager:'#pager',
 34             autowidth:true,
 35             height:'60%',
 36             rowNum : 3,
 37             rowList : [2,3,4,5],
 38             caption : "轮播图的详细信息",
 39             editurl:'${pageContext.request.contextPath}/banner/oper',//设置编辑表单提交路径
 40             viewrecords : true,
 41         }).navGrid('#pager',{edit : true,add : true,del : true,search:false},
 42 
 43 
 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             }
 96         );
 97     })
 98 </script>
 99 
100 
101 <body>
102 <table id="tt"></table>
103 <div id="pager" style="height: 30px"></div>
104 </body>
105 </html>

4.后台编码

public void upload(String id, MultipartFile cover) throws IOException {
        Banner banner = new Banner();
        log.info("上传图片的原始名字"+cover.getOriginalFilename());
        String realPath =httpSession.getServletContext().getRealPath("image");
        cover.transferTo(new File(realPath,cover.getOriginalFilename()));
        banner.setId(id);
        banner.setCover(cover.getOriginalFilename());
        bannerDAO.updateByPrimaryKeySelective(banner);
    }

需要在submit之后进行一次图片路径的修改

recreateForm: true 确保每添加或编辑表单是重新创建。

 

版权声明：本文为xiaoyinger原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/xiaoyinger/p/11356592.html