使用jqGrid进行图片上传

1.jsp代码

  <%--引入bootstrap的样式--%>
    <link rel="stylesheet" href="statics/boot/css/bootstrap.min.css">
    <%--引入bootstrap和jqgrid的整合样式--%>
    <link rel="stylesheet" href="statics/jqgrid/css/trirand/ui.jqgrid-bootstrap.css">
    
    <%--引入js文件--%>
    <script src="statics/boot/js/jquery-2.2.1.min.js"></script>
    <%--引入bootstrap的js文件--%>
    <script src="statics/boot/js/bootstrap.min.js"></script>
    
    <%--引入jqgrid的js文件--%>
    <script src="statics/jqgrid/js/trirand/jquery.jqGrid.min.js"></script>
    <script src="statics/jqgrid/js/trirand/i18n/grid.locale-cn.js"></script>
    <script src="statics/jqgrid/js/ajaxfileupload.js"></script>
    <script type="text/javascript">
            $(function () {
                $('#table').jqGrid({
                    // 整合使用bootstrap样式的属性
                    styleUI: 'Bootstrap',
                    url: '${pageContext.request.contextPath}/banner/selectByPage',
                    datatype: 'json',
                    colNames: ['名称', '图片', '描述', '创建日期', '状态'],
                    // 开启表格编辑模式
                    cellEdit: true,
                    // 指定表单编辑时提交的路径
                    editurl: '${pageContext.request.contextPath}/banner/operBanner',
                    colModel: [
                        //传入后台的数据
                        {name: 'title', align: 'center', editable: true},
                        {
                            name: 'cover', align: 'center', editable: true,
                            edittype: 'file',
                            formatter: function (value, options, row) {
                                return '<img style="height: 50px;" src="${pageContext.request.contextPath}/' + 'files/' + row.cover + '"/>';
                            }
                        },
                        {name: 'description', align: 'center', editable: true},
                        {
                            name: 'createDate',
                            index: 'operateTime',
                            formatter: "date",
                            formatoptions: {newformat: 'Y-m-d'}
                        },
                        {
                            name: 'status', align: 'center', editable: true,
                            edittype: 'select',//数据要在后台转换为select形式的string字符串
                            editoptions: {dataUrl: '/banner/showAll'},
                            //下拉列表中展示的内容
                            formatter: function (value, options, row) {
                                // 自定义单元格展示内容
                                return row.status;
                            }
                        },
                    ],
                    autowidth: true,
                    pager: '#pager',
                    rowList: [2, 4, 10, 20, 50],
                    rowNum: 4,
                    page: 1,
                    viewrecords: true,
                    multiselect: true,
                    rownumbers: true,
                    height: 350,
                }).navGrid('#pager', {edit: true, add: true, del: true},
                    {
                        //控制修改操作
                        closeAfterEdit: true,
                        afterSubmit: function (response) {
                            var id = response.responseJSON.data;
                            var code = response.responseJSON.status;
                            console.log(code)
                            if (code == "updateOk") {
                                $.ajaxFileUpload({
                                    url: "${pageContext.request.contextPath}/banner/motifyUpload",//用于文件上传的服务器端请求地址
                                    fileElementId: 'cover',    //文件上传空间的id属性  <input type="file" id="file" name="file" />
                                    //dataType: 'json',       //返回值类型 一般设置为json
                                    //type:'POST',
                                    data: {id: id},
                                    success: function () {
                                        $("#table").trigger("reloadGrid");
                                    }
                                })
                                return "true";
                            }
                        }
                    },
                    {
                        //控制添加操作
                        closeAfterAdd: true,
                        afterSubmit: function (response) {
                            alert(" zhuijia");
                            var id = response.responseJSON.data;
                            var code = response.responseJSON.status;
                            console.log(code)
                            if (code == "addOk") {
                                $.ajaxFileUpload({
                                    url: "${pageContext.request.contextPath}/banner/upload",//用于文件上传的服务器端请求地址
                                    fileElementId: 'cover',    //文件上传空间的id属性  <input type="file" id="file" name="file" />
                                    //dataType: 'json',       //返回值类型 一般设置为json
                                    //type:'POST',
                                    data: {id: id},
                                    success: function () {
                                        $("#table").trigger("reloadGrid");
                                    }
                                })
                                return "true";
                            }
                        }
                    },
                    {
                        //控制删除操作
                    });
            })
        </script>

2.controller层

    // oper  代表请求的操作是什么 |  add/del/edit
        @ResponseBody
        @RequestMapping("operBanner")
        public Map<String, String> operBanner(String oper, Banner banner, HttpServletRequest request) {
            HashMap hashMap = new HashMap();
            if ("add".equals(oper)) {
                banner.setId(UUID.randomUUID().toString());
                banner.setCreateDate(new Date());
                banner.setLastUpdateDate(new Date());
                bannerService.insert(banner);
                hashMap.put("status", "addOk");
                hashMap.put("data", banner.getId());
                return hashMap;
            } else if ("del".equals(oper)) {
                bannerService.deleteById(banner.getId());
                hashMap.put("status", "delOk");
                return hashMap;
            } else if ("edit".equals(oper)) {
                //将图片路径设为null
                if (banner.getCover().equals("")) {
                    banner.setCover(null);
                }
                bannerService.updateById(banner);
                hashMap.put("data", banner.getId());
                hashMap.put("status", "updateOk");
                return hashMap;
            } else {
                hashMap.put("status", "error");
                return hashMap;
            }
        }
*文件上传*

    @RequestMapping("upload")
        public void upload(MultipartFile cover, String id, HttpSession session) throws IOException {
            System.out.println("id :" + id);
            System.out.println("cover:" + cover.getOriginalFilename());
            //文件上传
            File file = new File(session.getServletContext().getRealPath("/files"), cover.getOriginalFilename());
            //如果不存在，则上传
            if (!file.exists()) {
                cover.transferTo(file);
            }
            //修改数据库中的图片路径
            Banner banner = new Banner();
            banner.setId(id);
            banner.setCover(cover.getOriginalFilename());
            bannerService.updateById(banner);
        }
    
        @RequestMapping("motifyUpload")
        public void motifyUpload(MultipartFile cover, String id, HttpSession session) throws IOException {
            System.out.println("id :" + id);
            System.out.println("cover:" + cover.getOriginalFilename());
            //文件上传
            File file = new File(session.getServletContext().getRealPath("/files"), cover.getOriginalFilename());
            //如果不存在，则上传
            if (!file.exists()) {
                cover.transferTo(file);
            }
            if (!cover.getOriginalFilename().equals("")) {
                //修改数据库中的图片路径
                Banner banner = new Banner();
                banner.setId(id);
                banner.setCover(cover.getOriginalFilename());
                bannerService.updateById(banner);
            }
        }

3.遇到的问题以及解决办法
（1）图片上传上去为假路径
解决办法：获取上传的文件名称，重新调用修改方法，将文件名称传入数据库，注意MultipartFile cover必须为图片的字段名。
（2）修改时不上传图片，路径会变成空
解决办法：使用修改方法时将图片的路径设为null，则不修改
（3）上传完图片之后进不去success方法，页面不刷新
解决办法：当使用json返回值是，方法中没有返回值或者返回值是字符串时，不能使用dataType: ‘json’, 的注释，否则方法会报错。
（4）数据加载不出来
解决办法：使用json作为数据传输时，需要加@RestController