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

轮播功能实现

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

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

<div class="layui-carousel" id="rotation">
    <div carousel-item id="rotationItem" style="height: 350px"></div>
</div>

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('<div calss><a target="_blank"> <img src=/static/img01/蒙版组%203.png style="auto;height: 100%;width: 100%"></a> </divcalss>');
                }else {
   
                    for (let i = 0; i < result.count; i++) {
   
                        var pic = data[i].pic;
                        var url = data[i].url;
                        var id = data[i].id;
                        var title = data[i].title;
                        // 对轮播的 div 进行一些设置，包括 id , 标题 , href 和 图片(该处只得到一个图片的路径，需进一步处理) 
                        $("#rotationItem").append('<div calss><a href="' + ctxPath + url + '" target="_blank"> <img id="' + id + '" title=" '+title+' " style="auto;height: 100%;width: 100%"></a> </divcalss>');
                        function readImg() {
    
                        	// 处理图片(根据图片路径pic找到图片，转化成二进制流数据并展示)
                        	// homeRotation/IoReadImage,读取本地文件的方法，下文会写
                            getBinary("/homeRotation/IoReadImage",{
   'src': pic},id);
                        }
                        readImg();
                    }
                }
                // 重新加载轮播(二者缺一不可)
                var ins = carousel.render({
     
                    elem: '#rotation' // 绑定容器ID
                    ,interval: 4500  // 设置切换时间
                    ,height: '350px'  // 设置容器高度
                    ,width: '100%' //设置容器宽度
                    ,arrow: 'always' //始终显示箭头;
                });
                ins.reload({
   
                    elem: '#rotation' // 绑定容器ID
                    ,interval: 4500   // 设置切换时间