当我们使用jqgrid进行表格展示时,在使用其工具栏进行增删改查,避免不了的上传文件,所以需要发ajaxfileupload请求进行文件到服务器。
- 引入ajaxfileupload.js文件
<script src="/statics/jqgrid/js/ajaxfileupload.js" type="text/javascript"></script>
- 当引入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;
}
}, {}
);
- 下面就是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;
}
}
注意:
文件上传操作是在添加/修改操作之后进行的,文件上传之后对对象的路径属性进行修改。