JS代码
有必要说明一下，这里的逻辑。首先 upload.render 绑定的 rotationUpload 上传按钮，将图片加载到前端，预览方法为 obj.preview ，但此时并没有 触发上传方法homeRotation/uploadImg, 真正触发上传方法的是 uploadRotation 按钮。所以在点击 updateRotation 确定(即保存或修改时)，才将预览的图片上传到指定位置 。然后上传图片和保存轮播数据 是两个方法，即上传图片ajax成功之后的回调函数再发送 保存数据的ajax。其他的就是 保存 有三种状态有轮 只修改图片， 只修改数据， 既修改图片又修改数据,判断好就行了。
//上传图片
var uploadInst = upload.render({
elem: '#rotationUpload' // 图片上传按钮
,url: Hussar.ctxPath+ '/homeRotation/uploadImg'
,auto: false // 不自动上传
,multiple: false // 是否允许上传多张图片
,accept: 'file'
// ,exts: 'png|jpg|bmp|jfif' //设置只能上传图片格式文件
,size: 50000 //最大允许上传的文件大小
,bindAction: '#uploadRotation' // 绑定上传按钮
,choose: function (obj) {
//预读本地文件示例，不支持ie8
obj.preview(function (index, file, result) {
$('#imgName').val(file.name); //图片名字
imageName = file.name;
$('#demo1').attr('src', result); //图片链接（base64）
});
}
, done: function (res) { // 成功之后的回调函数
if (res.code === 200){
$("#realPath").val(res.realPath);
var ajax = new $ax(Hussar.ctxPath + "/homeRotation/preserveRotation",
function (data) {
if (data.code === 200){
Hussar.success(data.message);
jumpToListPage(); // 回到列表页面
}else {
Hussar.error(data.message);
}
},function (data) {
Hussar.error('提交失败！' + data.message + '!');
});
ajax.setData(JSON.stringify(
{
pic: $("#realPath").val(),
title: $("#title").val(),
noticeName: $("#noticeName").val(),
noticeId: $("#noticeId").val(),
noticeUrl: $("#noticeUrl").val(),
noticeType: $("#noticeType").val(),
page: $("#page").val()
}));
}
ajax.setContentType('application/json');
ajax.start();
}else{
return Hussar.error(res.message);
}
}
, error: function () { //失败之后的回调函数，并实现重传
var demoText = $('#demoText');
demoText.html('上传失败 重试');
demoText.find('.demo-reload').on('click', function () {
uploadInst.upload();
});
}
})
// 新增轮播 保存按钮
$("#addRotation").click(function () {
// 数据校验的方法，根据需要来
if (rotationValidation()&&homeRotationConfigureHandling.check()){
var operation = function () {
$("#noticeUrl").val(homeRotationConfigureHandling.seItem.noticeUrl),
$("#noticeType").val(homeRotationConfigureHandling.seItem.noticeType),
$("#noticeId").val(homeRotationConfigureHandling.seItem.proId),
$("#title").val(homeRotationConfigureHandling.seItem.pName),
$("#uploadRotation").click(); // 就是这里，触发图片上传
};
Hussar./confirm/i('确定要保存吗？',operation);
}
})
// 回到列表页面
function jumpToListPage() {
setTimeout(function () {
if (window.parent == window) {
window.location.href = window.location;
} else {
var ifrmes = window.parent.document.getElementsByTagName("iframe");
for (var i = 0; i < ifrmes.length; i++) {
var iframeObj = ifrmes[i];
if (iframeObj.src.indexOf('/homeRotation/toHomeRotationIndex') != -1) {
iframeObj.src = iframeObj.src;
window.parent.HussarTab.tabChange(iframeObj.getAttribute("tab-id"))
break;
}
}
window.parent.HussarTab.tabDelete(window.frameElement.getAttribute("tab-id"));
}
}, 2000);
}
Controller层代码
@RequestMapping("/homeRotation/uploadImg")
@ResponseBody
public JSONObject uploadImg(@RequestParam("file") MultipartFile multipartFile) throws Exception {
return iHomeRotationService.uploadRotationImg(multipartFile);
}
@RequestMapping("/preserveRotation")
@ResponseBody
public Tip preservationRotation(@RequestBody RotationInfoVO rotationInfoVO){
return iHomeRotationService.insertRotation(rotationInfoVO);
}
Service层代码
链接的全拼包含 敏感字段( noticeId),需要加密起来，其方法为
encrypt = DesUtil.encrypt(RotationNoticeUtil.ROTATION_DEC_PWD, rotationInfoVO.getNoticeId());
@Override
public JSONObject uploadRotationImg(MultipartFile multipartFile) throws Exception {
JSONObject json = new JSONObject();
if (!StringUtils.isEmpty(String.valueOf(multipartFile)) && multipartFile.getSize() > 0) {
String id = UUID.randomUUID().toString().replaceAll("-", ""); // 随机生成id
String fileName = multipartFile.getOriginalFilename(); // 获取上传的文件的文件名
String suffix = fileName.substring(fileName.lastIndexOf(".")); // 获取 文件的后缀 (例 .png 这种)
//检查文件名是否包含xss脚本
String xss = XssCheckerUtils.checkXss(fileName);
if (!org.apache.commons.lang3.StringUtils.isEmpty(xss)) {
throw new ApiException(HttpCode.BAD_REQUEST.value(), "invalid request , xss code:" + xss);
}
try {
// 系统上传的路径
String fileSavePath = this.hussarProperties.getFileUploadPath();
fileSavePath = fileSavePath.substring(0,fileSavePath.length()-1);
String realPath = fileSavePath + "/" +id + suffix; // 上传的文件全拼
File newFile = new File(realPath);
multipartFile.transferTo(newFile); // 上传的主方法
json.put("code",200);
json.put("message","上传成功!");
json.put("realPath",realPath);
json.put("id",id);
return json;
} catch (IOException e) {
throw new HussarException(BizExceptionEnum.UPLOAD_ERROR);
}
} else {
json.put("code",233);
json.put("message","文件为空!");
return json;
}
}
@Override
public Tip insertRotation(RotationInfoVO rotationInfoVO) {
String encrypt = "";
if (!rotationInfoVO.getNoticeId().isEmpty()){
// 对 noticeId 加密，得到密文 拼接到 url
encrypt = DesUtil.encrypt(RotationNoticeUtil.ROTATION_DEC_PWD, rotationInfoVO.getNoticeId());
}
rotationInfoVO.setId( UUID.randomUUID().toString().replaceAll("-", ""));
String url = "";
// 项目中所有的公示公告及法规等，跳转的href有三种情况，需做判断
if ((rotationInfoVO.getNoticeType() == null || rotationInfoVO.getNoticeType().isEmpty())
&& (rotationInfoVO.getNoticeId()== null || rotationInfoVO.getNoticeId().isEmpty())){
url = rotationInfoVO.getNoticeUrl();
}else if (rotationInfoVO.getNoticeType() == null || rotationInfoVO.getNoticeType().isEmpty()){
url = rotationInfoVO.getNoticeUrl() + "?pId="+encrypt;
}else {
url = rotationInfoVO.getNoticeUrl() + "?pId="+encrypt+"&type="+rotationInfoVO.getNoticeType();
}
rotationInfoVO.setUrl(url);
rotationInfoVO.setCreatTime(new Date(System.currentTimeMillis()));
rotationInfoVO.setCreatUser(ShiroKit.getUser().getName());
rotationInfoVO.setRotationStatus("0");
rotationInfoVO.setDel("0");
boolean b = false;
try {
b = iHomeRotationConfigureMapper.insertRotation(rotationInfoVO);
}catch (Exception e){
return new ErrorTip(HttpCode.INTERNAL_SERVER_ERROR.value(),"数据错误！");
}
if (b){
Tip successTip = new SuccessTip();
successTip.setMessage("添加成功！");
return successTip;
}else {
return new ErrorTip(HttpCode.CONFLICT.value(),"添加失败！");
}
}
3.LayUI数据表格加载时自动选中
当修改某条轮播时，之前绑定的数据需要在页面刚加载的时候就绑定上，所以这里有必要说一下自动选中的问题。主要方法 parsedata:function
JS代码
table.render({
elem: '#uploadList'
,height:393
,url: ctxPath + ''
,method: 'POST'
,contentType : "application/json;charset=UTF-8"
,cols:[[
{type: 'checkbox', fixed: 'left'},
{title: '序号',type : 'numbers',align:"center" ,halign:'center',width: 48},
{title: '主键',width:'0%', field: 'proId',hide: true, align: 'center',halign:'center'},
{title: '标题', field:'pName', align: 'center',halign:'center'},
{title: '创建时间', field:'createTime', align: 'center',halign:'center',sort:true},
{title: '公告Url',width:'0%', field: 'noticeUrl',hide: true, align: 'center',halign:'center'},
{title: '公告类型',width:'0%', field: 'noticeType',hide: true, align: 'center',halign:'center'},
]]
,limit: 10
,page: true
,even: true
,where: {}
,done: function (res, curr, count) { //修改表头颜色
$('th').css({ 'background-color':'#a4dacd','color':'#000','font-size':'14px'});
$('th div').css('text-align', 'center');
}
,loading: true
// 数据格式解析的回调函数,选中的轮播的基本数据存在window全局变量中。
,parseData:function(res){
var data = res.data;
if (window.type == "update"){
for (let i = 0; i < data.length; i++) {
if ( window.noticeTitle == data[i].pName && window.noticeUrl == data[i].noticeUrl){
data[i]["LAY_CHECKED"] = true; // 设置 选中
}
}
}
return { //将重新处理好的数据传给表格以完成渲染
"code": res.code,
"count": res.count,
"data": data
};
}
});
