-
项目背景:
项目开发需要使用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);
}