jqGrid之ajaxfileupload文件上传

当我们使用jqgrid进行表格展示时，在使用其工具栏进行增删改查，避免不了的上传文件，所以需要发ajaxfileupload请求进行文件到服务器。

1. 引入ajaxfileupload.js文件

<script src="/statics/jqgrid/js/ajaxfileupload.js" type="text/javascript"></script>

2. 当引入js支持之后就可以进行文件的上传了

这是具体的上传实现代码

 $('#banner-table').jqGrid({
                url: '/banner/showAllBanner',
                //引入bootstrap的UI样式
                styleUI: 'Bootstrap',
                datatype: 'json',
                colNames: ['编号', '图片', '标题', '状态', '创建日期', '详细', '最后修改时间'],
                // 指定表单编辑时提交的路径
                editurl: '/banner/operBanner',
                colModel: [
                    {name: 'id', align: 'center'},
                    {
                        name: 'cover', align: 'center', editable: true,
                        edittype: "file",//改为文件上传模式 和上传类型
                        editoptions: {enctype: "multipart/form-data"},
                        formatter: function (value, options, row) {
                            return '<img style="height: 50px;" src="/upload/' + row.cover + '"/>';
                        }
                    },
                    {name: 'title', align: 'center', editable: true},
                    {
                        name: 'status', align: 'center', editable: true,
                        edittype: "select",
                        editoptions: {value: "true:正常;false:冻结"}
                    },
                    {name: 'createDate', align: 'center'},
                    {name: 'description', align: 'center', editable: true},
                    {name: 'lastUpdateDate', align: 'center'}
                ],
                pager: '#banner-pager',
                rowNum: 5,
                page: 1,
                rowList: [5, 10, 20, 30],
                viewrecords: true,
                multiselect: true,
                rownumbers: true,
                height: 350,
                autowidth: true
            }).navGrid('#banner-pager', {
			//这个地方必须写，就算写个空{}占位也行
			'add': true
            },
            //这个位置的顺序为 edit  add  del   。。。。 不可错乱
                {
                	//开启修改完成模态框自动关闭
                    closeAfterEdit: true,
                    afterSubmit: function (response) {
                    //获取 添加/修改 返回的id  用于修改用户的文件路径属性
                        var id = response.responseJSON.data;
                        $.ajaxFileUpload({
                            url: '/banner/upload', //上传路径
                            secureuri: false,
                            fileElementId: 'cover',//上传属性id  即你的需要上传的属性的字段名
                            data: {id: id},
                            dataType: 'json',
                            success: function (data, status) {
                                $("#banner-table").trigger("reloadGrid");//上传完成后刷新table表格
                            }
                        });
                        //需要返回数据才算ajaxfileupload函数执行结束，关闭模态框
                        return response.responseJSON.mes;
                    }
                },
                {
                    closeAfterAdd: true,
                    afterSubmit: function (response) {
                        var id = response.responseJSON.data;
                        $.ajaxFileUpload({
                            url: '/banner/upload',
                            secureuri: false,
                            fileElementId: 'cover',
                            data: {id: id},
                            dataType: 'json',
                            success: function (data, status) {
                                $("#banner-table").trigger("reloadGrid");
                            }
                        });
                        return response.responseJSON.mes;
                    }
                }, {}
            );

3. 下面就是controller层upload的代码实现

  /**
     * 加入if判断为了判断是否长传图片   以防修改时不修改图片而进行上传操作
     * @param cover   必须和上传的属性name对应
     * @param id
     * @param request
     * @return
     * @throws IOException
     */
 @RequestMapping("upload")
    public Map<String, Object> uploadPic(MultipartFile cover,String id,HttpServletRequest request) throws IOException {
        if (!"".equals(cover.getOriginalFilename())){
            String realPath = request.getSession().getServletContext().getRealPath("/view/banner/image");
            cover.transferTo(new File(realPath, cover.getOriginalFilename()));//文件上传
            return bannerService.updateBanner(id,cover.getOriginalFilename());
        }else {
            return null;
        }
    }

注意：
文件上传操作是在添加/修改操作之后进行的，文件上传之后对对象的路径属性进行修改。