JqGrid结合AjaxFileUpload插件进行文件上传_jqgrid每行上传附件-CSDN博客

本文链接：https://blog.csdn.net/zhang33565417/article/details/99665950

项目背景:

项目开发需要使用jqGrid生成表格并在表格中显示图片,并实现从用户本地上传图片至服务器,如下图所示

知识点

首先,点击添加按钮，用jqGrid将信息写入数据库，此时文件上传的路径是经过浏览器保护处理之后的路径，不是文件的真实路径。
然后进行文件的上传,这里使用ajaxFileUpload插件进行文件上传，点击添加之后信息和错误的文件路径先进入数据库。
最后执行ajaxFileUpload()方法进行文件上传，同时更改数据库中所存储的文件路径为项目中的相对路径代码如下

代码实现
前台代码
注意需要导js文件,ajaxFileUpload的js和jqGrid和BootStrap的js
这里我已经在主文件Home.jsp中导过了js文件，子的banner-show.jsp不导也可以

Home.jsp
<!--引入样式文件-->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/boot/css/bootstrap.css" type="text/css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/jqgrid/css/trirand/ui.jqgrid-bootstrap.css" type="text/css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/boot/js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/boot/js/bootstrap.js"></script>
    <script src="${pageContext.request.contextPath}/static/jqgrid/js/trirand/i18n/grid.locale-cn.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/static/jqgrid/js/trirand/jquery.jqGrid.min.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/static/jqgrid/js/ajaxfileupload.js" type="text/javascript"></script>

<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
     <div class="panel-body text-center">
          <a href="javascript:$('#contentLayout').load('${ctx}/view/banner/banner-show.jsp')" class="btn btn-default">轮播图</a>
     </div>
</div>

//banner-show.jsp
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" isELIgnored="false" %>
<c:set value="${pageContext.request.contextPath}" var="ctx"></c:set>
    <script>
        $(function () {
            $("#banner-table").jqGrid({
                url: "${ctx}/banner/findByPage",//分页查询提交的路径
                datatype: "json",
                styleUI:'Bootstrap',
                colNames: ['ID','名称', '封面','描述','创建日期','状态'],
                //cellEdit: true,
                editurl: '/banner/operBanner',//增删改提交的路径
                colModel: [
                    {name: 'id',hidden : true},
                    {name: 'title',editable : true},
                    //这点击文件上传的cover传给后台的是一个纯路径，而不是MultipartFile类型，所以文件上传还是需要upload插件
                    {name: 'cover',editable : true, edittype:"file",
                        formatter:function (value, options, row) {
                            return "<img style='width:70px;height:35px' src='${ctx}/view/banner/image/"+value+"'>";
                        }
                    },
                    {name: 'description',editable : true},
                    {name: 'createDate'},
                    //下拉框
                    {name: 'status',editable : true,edittype:'select', editoptions: {value: {1:'显示', 2:'不显示'}},
                        formatter:function (value, options, row) {
                            if(value == 1){return '显示'}
                            else{return '不显示'}
                        }
                    }
        ],
                autowidth: true, //自适应父容器的大小宽度
                pager: '#pager',
                rowList: [5, 10, 15, 20],
                rowNum: 5,
                viewrecords: true,
                page: 1,
                //multiselect: true,
                rownumbers: true,
                hidegrid: true,
                height:'255px',
        }).navGrid('#pager', {'add': true, 'edit': true, 'del': true, 'search': false, 'refresh': true},
            {
                //控制修改操作,修改之后关闭修改框
                closeAfterEdit:true,
                afterSubmit:function (response) {
                    //需要后台的修改方法将自己的id作为返回值返回，方便文件上传时根据id修改的操作
                    var id = response.responseJSON.data;
                    var code = response.responseJSON.code;
                    if (code == 200){
                        $.ajaxFileUpload( {
                            url : "${ctx}/banner/upload",//用于文件上传的服务器端请求地址
                            fileElementId : 'cover',    //文件上传空间的id属性  <input type="file" id="file" name="file" />
                            //dataType : 'json',       //返回值类型 一般设置为json,但是前台如果返回的不是json格式，而是void或者字符串等类型，则这个一定要注掉
                            type:'POST',
                            data:{id:id},
                            success : function() {
                                $("#banner-table").trigger("reloadGrid");
                            },
                            error:function () {
                                alert('出错了');
                            }
                        });
                        return "true";
                    }
                }
            },{
                //控制添加操作
                closeAfterAdd:true,
                afterSubmit:function (response) {
                    //需要后台的添加方法将自己的id作为返回值返回，方便文件上传时根据id修改的操作
                    var id = response.responseJSON.data;
                    var code = response.responseJSON.code;
                    if (code == 200){
                        $.ajaxFileUpload( {
                            url : "${ctx}/banner/upload",//用于文件上传的服务器端请求地址
                            fileElementId : 'cover',    //文件上传空间的id属性  <input type="file" id="file" name="file" />
                            //dataType : 'json',       //返回值类型 一般设置为json,但是前台如果返回的不是json格式，而是void或者字符串等类型，则这个一定要注掉
                            type:'POST',
                            data:{id:id},
                            success : function() {
                                $("#banner-table").trigger("reloadGrid");
                            },
                            error:function () {
                                alert('出错了');
                            }
                        });
                        return "true";
                    }
                }
            });
        });

    </script>

<table id="banner-table" class="text-center"></table>
<div id="pager"></div>

后台代码

1. 后台添加至数据库代码

//Controller层

    @RequestMapping("operBanner")
    //增删改操作
    public Map<String,Object> operBanner(String oper,Banner banner){
        HashMap map = new HashMap();
        if ("add".equals(oper)) {
            String id = bannerService.add(banner);
            return setResultSuccessData(id);
        }
        if ("del".equals(oper)){
            bannerService.deleteById(banner.getId());
        }
        if("edit".equals(oper)) {
            String id = bannerService.update(banner);
            return setResultSuccessData(id);
        }
        return setResultSuccess();
    }
 
//Service层

    @Override
    //添加
    public String add(Banner banner) {
        String id = UUID.randomUUID().toString().replace("-","");
        banner.setId(id);
        banner.setCreateDate(new Date());
        banner.setLastUpdateDate(new Date());
        bannerDAO.insert(banner);
        return id;
    }
    @Override
    //修改
    public String update(Banner banner) {
        //动态sql 如果属性值为null就不修改 （修改的时候不点文件上传，默认传的是个空字符串）
        if ("".equals(banner.getCover())){
            banner.setCover(null);
        }
        banner.setLastUpdateDate(new Date());
        int i = bannerDAO.updateById(banner);
        if (i==0) throw new RuntimeException("轮播图修改失败");
        return banner.getId();
    }

2. 上传文件代码

    //文件上传
    @RequestMapping("upload")
    public void upload(MultipartFile cover, String id, HttpSession session) throws IOException {
        //文件上传,如果文件已经存在就不用再上传了,file是个路径
        //这里MultipartFile cover  包含二进制数据和文件名称
        File file = new File(session.getServletContext().getRealPath("/view/banner/image"), cover.getOriginalFilename());
        if(!file.exists()){
            cover.transferTo(file);
        }
        //修改数据库中的图片路径
        Banner banner = new Banner();
        banner.setId(id);
        banner.setCover(cover.getOriginalFilename());
        bannerService.update(banner);
    }