Java 轮播功能实现 (图片预览+文件上传+数据加密)

您所在的位置：网站首页 › 轮播图在线生成 › Java 轮播功能实现 (图片预览+文件上传+数据加密)

Java 轮播功能实现 (图片预览+文件上传+数据加密)

2024-06-22 17:40| 来源: 网络整理| 查看: 265

轮播功能实现

前端为 LayUI 框架，所涉及到的知识点包括图片预览，文件上传，blob数据处理，LayUI数据表格加载时自动选中和数据加密(DEC)。

1.轮播效果的实现 html代码，定义轮播容器

JS代码 jQuery处理blob数据的方法为 function getBinary()

/** * Created by suzhaoxi on 2021/12/13. */ layui.use(['table','jquery','HussarAjax','carousel','layer','Hussar','element'], function() { var element = layui.element; var table = layui.table; var Hussar = layui.Hussar; var $ = layui.jquery; var layer = layui.layer; const ctxPath = Hussar.ctxPath; var $ax = layui.HussarAjax; var carousel = layui.carousel; // 公用方法，jQuery处理图片流，用js写 function getBinary(url, args, id ) { var xmlhttp = new XMLHttpRequest(); var data = eval(args); var i = 0; for (var key in data) { if (i++ === 0) { url += '?' + key + "=" + data[key]; } else { url += '&' + key + "=" + data[key]; } } xmlhttp.open("GET", url, true); xmlhttp.responseType = "blob"; xmlhttp.onload = function () { var img = $('#'+id); window.URL.revokeObjectURL(img.src); $('#'+id).attr('src', window.URL.createObjectURL(this.response)); }; xmlhttp.send(); } // 生成轮播的方法 function rotation() { $.ajax({ // 从数据库中得到一些基本参数 url: ctxPath + "/homeRotation/getRotationListsInHome" , type: 'POST', dataType: 'JSON', data: {}, success: function (result) { var data = result.data; console.log(result) if (result.count == 0){ // 如果没有图片，就放一张默认的图片 $("#rotationItem").append(' '); }else { for (let i = 0; i -- 效果图预览 -- 推荐比例 (4:1) -- 图片上传：上传取消确定 real确定

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('确定要保存吗？',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 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; } } /** * 新增一条轮播数据，写这个主要是因为有个对noticeId的加密 * @param rotationInfoVO * @return */ @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

【本文地址】

Java 轮播功能实现 (图片预览+文件上传+数据加密)

Java 轮播功能实现 (图片预览+文件上传+数据加密)

今日新闻

推荐新闻