精华内容
下载资源
问答
  • LayUI 图片预览功能

    2021-02-16 12:19:34
    script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> 2.HTML代码 <script> // 鼠标移至图片上方,鼠标样式变为手状态 $("ul").on("mouseover", ...

    1.jquery版本3.2.1(以下程序适用于1.7版本以上)

    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    

    2.HTML代码

    <script>
    	// 鼠标移至图片上方,鼠标样式变为手状态
        $("ul").on("mouseover", "img", function() {
            this.style.cursor = "pointer";
        });
    
        // 图片点击预览,ul为父类元素,img为已存在元素或者未来生成元素
        $("ul").on("click","img", function () {
            clickPicture(this);
        });
    
        // 点击图片放大预览
        function clickPicture(obj) {
            var img = new Image();
            img.src = obj.src;
            img.onload = function (ev) {
                // 获取图片高度
                var height = this.height;
                // 获取图片宽度
                var width = this.width;
                // 图片URL地址
                var imgHtml = "<img style='height: 100%;width: 100%' src='" + obj.src + "' />";
                // 图片显示面积,前参数为宽,后参数为高
                var area = [];
                if (height <= 747 && width <= 1680) {
                    area = [width + 'px', height + 'px'];
                } else if (height > 747 && width <= 1680) {
                    area = [width + 'px', 747 + 'px'];
                } else if (height <= 747 && width > 1680) {
                    area = [1680 +'px', height + 'px'];
                } else {
                    area = [1680 + 'px', 747 + 'px'];
                }
                //弹出层
                top.layer.open({
                    type: 1,
                    shade: 0.8,
                    offset: 'auto',
                    area: area,
                    shadeClose: true,//点击外围关闭弹窗
                    scrollbar: false,//不显示滚动条
                    title: false, //不显示标题
                    content: imgHtml, //捕获的元素
                    cancel: function () {
                        //layer.msg('捕获就是从页面已经存在的元素上,包裹layer的结构', { time: 5000, icon: 6 });
                    }
                });
            };
        }
    </script>
    

    3.效果

    ①原缩略图

    在这里插入图片描述

    ②点击缩略图后按屏幕显示范围放大,如果超出范围显示滚动条

    在这里插入图片描述

    展开全文
  • layui图片上传、预览、删除、 <div class="layui-upload"> <button type="button" id="test2" class="layui-btn tj">多图片上传</button> <blockquote class="layui-elem-quote layui-quote...

    layui图片上传、预览、删除、

            <div class="layui-upload">
              <button type="button" id="test2" class="layui-btn tj">多图片上传</button>
              <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;width: 88%">
                预览图:
                <div class="layui-upload-list uploader-list" style="overflow: auto;" id="uploader-list">
                  #for(tt:ccbeandb)
                  <div id="" class="file-iteme">
                    <div class="handle" onclick="delFile(this)"> <i class="layui-icon"
                        style="color: white ;margin-right: 40%">&#xe640;</i></div>
                    <img style="width: 100px;height: 100px;" class="preview" id="imgid" src='#(tt.imgUrl)'>
                    <div class="info" id="filename">#(tt.imgName)</div>
                    <input type="hidden" name="imgs" value="#(tt.imgUrl)" />
                  </div>
                  #end
                </div>
              </blockquote>
            </div>
    
     <script>
              layui.use('upload', function () {
                var images = [];
                var $ = layui.jquery,
                  upload = layui.upload;
                upload.render({
                  elem: '#test2',
                  url: '',
                  data: {
                    //要往后台传的值
                  }
    
                  ,
                  multiple: true,
                  acceptMime: 'image/*',
    
                  ext: 'jpg|png|gif|bmp|jpeg',
                  before: function (obj) {
                    this.data = {
                      //要往后台传的值
                    }
                    layer.msg('图片上传中...', {
                      icon: 16,
                      shade: 0.01,
                      time: 0
                    })
                  },
                  done: function (res) {
                    var images = [];
                    layer.close(layer.msg()); //关闭上传提示窗口
                    //上传完毕
                    $('#uploader-list').append(
                      '<div id="" class="file-iteme">' +
                      '<div class="handle" οnclick="delFile(this)"> <i class="layui-icon" style="color: white ;margin-right: 40%">&#xe640;</i></div>' +
                      '<img style="width: 100px;height: 100px;" class="preview" id="imgid" src=' + res.url +
                      '>' +
                      '<div class="info" id="filename">' + res.filename + '</div>' +
                      '<input type="hidden" name="imgs" value="' + res.url + '" />' +
                      '</div>'
                    );
                  }
                });
                $(document).on("mouseenter mouseleave", ".file-iteme", function (event) {
                  if (event.type === "mouseenter") {
                    //鼠标悬浮
                    $(this).children(".info").fadeIn("fast");
                    $(this).children(".handle").fadeIn("fast");
                  } else if (event.type === "mouseleave") {
                    //鼠标离开
                    $(this).children(".info").hide();
                    $(this).children(".handle").hide();
                  }
                });
    
                delFile = function (pay) {
                  var path = $(pay).next().attr('src');
                  var filename = $(pay).next().next().html();
                  var t = $(pay).parent()
                  console.log(t)
                  if (filename == "") {
                    alert("还未上传图片!")
                  } else {
                    if (confirm("确实要删除吗?")) {
                      $.ajax({
                        type: "POST",
                        url: "",
                        data: {
                          //要往后台传的值
                        },
                        dataType: "json",
                        success: function (res) {
                          if (res == 1) {
                            t.remove();
                            layer.msg('删除成功');
                          } else {
                            layer.msg('删除失败');
                          }
                        }
                      });
                    }
                  }
                }
    
                $(document).on("click", ".file-iteme .preview", function (event) {
                  var url = $(this).attr('src');
                  var index = layer.open({
                    type: 2,
                    content: url,
                    area: ['100%', '100%'],
                    title: "预览",
                    maxmin: true,
                    closeBtn: 1
                  });
                  layer.full(index);
    
                })
    
              })
            </script>
    
      <style>
              .uploader-list {
                margin-left: -15px;
              }
    
              .uploader-list .info {
                position: relative;
                margin-top: -25px;
                background-color: black;
                color: white;
                filter: alpha(Opacity=80);
                -moz-opacity: 0.5;
                opacity: 0.5;
                width: 100px;
                height: 25px;
                text-align: center;
                display: none;
              }
    
              .uploader-list .handle {
                position: relative;
                background-color: black;
                color: white;
                filter: alpha(Opacity=80);
                -moz-opacity: 0.5;
                opacity: 0.5;
                width: 100px;
                text-align: right;
                height: 18px;
                margin-bottom: -18px;
                display: none;
              }
    
              .uploader-list .handle i {
                margin-right: 5px;
              }
    
              .uploader-list .handle i:hover {
                cursor: pointer;
              }
    
              .uploader-list .file-iteme {
                margin: 12px 0 0 15px;
                padding: 1px;
                float: left;
              }
            </style>
    

    以上就是layui上传多图片的功能,悬浮可以删除,点击可以预览

    展开全文
  • Layui数据表格导出预览

    千次阅读 2019-04-18 08:28:33
    例如导出Excel表格时就需要获取条件查询表单的查询条件与数据表格内的查询条件对比,可以判断是否已经以条件查询表单的查询条件查询出数据,从而达到导出预览的效果! 步骤一:数据表格初始化加载与导入导出工具...

    开发工具与关键技术:mvc、layui、js、html
    作者:张俊辉
    撰写时间:2019年04月17日

    • 在有些时候我们在实现某些功能时需要获取数据表格的查询条件,例如导出Excel表格时就需要获取条件查询表单的查询条件与数据表格内的查询条件对比,可以判断是否已经以条件查询表单的查询条件查询出数据,从而达到导出预览的效果!

    步骤一:数据表格初始化加载与导入导出工具按钮绑定按钮

    <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm" lay-event="derived">导出</button>
                <button class="layui-btn layui-btn-sm" lay-event="tolead">导入</button>
            </div>
    </script>
    
     layui.use('table', function () {
    	var table = layui.table;
    	//供应商信息表
        table.render({
            elem: '#Supplier'
          , method: 'post'
          , toolbar: '#toolbarDemo'
          , id: 'idTest'
          , url: 'SelectSupplier' //数据接口
          , page: true //开启分页
          , cols: [[ //表头
            具体相关参数请产考Layui说明文档
          ]]
          , limit: 5
            , response: {
                statusName: 'success' //规定数据状态的字段名称,默认:code
              , statusCode: true //规定成功的状态码,默认:0
              , countName: 'totalRows' //规定数据总数的字段名称,默认:count
            }
            , request: {
                pageName: 'curPage' //页码的参数名称,默认:page
              , limitName: 'pageSize'
            }
        });
    });
    
    

    步骤二:监听条件查询表单提交:

    var tableSupplier2;//供应商多条件
    layui.use('form', function () {
        var form = layui.form;
        //多条件查询供应商信息
        form.on('submit(demo1)', function (data) {
            layui.use('table', function () {
                var table = layui.table;
                tableSupplier2 = table.reload('idTest', {
                    where: data.field
                });
            });
            return false; //阻止表单跳转。如果需要表单跳转,去掉这段即可。
        });
    });
    
    

    步骤三:监听头部工具栏导出按钮点击事件

    layui.use('table', function () 
    {
    	var table = layui.table;
    	//监听供应商信息头工具栏事件
        table.on('toolbar(Supplier)', function (obj) {
        	switch (obj.event) {
               case 'derived':
                    layer.confirm("是否要导出当前供应商数据?", {
                       icon: 3,
                       btn: ["确定", "取消"]
                    }, function (layerIndex) {
                       layer.close(layerIndex);
                       DerivedClick();
                    });
                    break;
           };
        });
    });
    
    

    步骤四:对比条件并显示导出模态框或提示框:

    //供应商信息导出模态框
    function DerivedClick() {
       var SupplierName2 = "";var CompanyName2 = "";var SupplierNumber2 = "";
       try {
           var Supplierwhere = tableSupplier2.config.where;
           SupplierName2 = Supplierwhere.SupplierName;
           CompanyName2 = Supplierwhere.CompanyName;
           SupplierNumber2 = Supplierwhere.SupplierNumber;
       }
       catch (e) {
           SupplierName2 = "";CompanyName2 = "";SupplierNumber2 = "";
       }
       if ($("#demo1 input[name='SupplierName']").val() != SupplierName2||$("#demo1 input[name='CompanyName']").val() != CompanyName2||$("#demo1 input[name='SupplierNumber']").val() != SupplierNumber2) {
           layui.use('layer', function () {
               var layer = layui.layer;
               layer.msg('请先查询并预览需要导出数据!', { icon: 0 });
           });
       }
       else {
           layui.use('layer', function () {
               var layer = layui.layer;
               layer.open({
                   type: 1,
                   title: '选择导出列',
                   area: ['850px', '330px'],
                   content: $('#DerivedLayer'), 
               });
           });
           $("#DerivedForm input[name='SupplierName2']").val(SupplierName2);
           $("#DerivedForm input[name='CompanyName2']").val(CompanyName2);
           $("#DerivedForm input[name='SupplierNumber2']").val(SupplierNumber2);
       }
    };
    
    

    效果图如下:在这里插入图片描述
    在这里插入图片描述

    展开全文
  • 问题:使用layui上传图片的,出现图片旋转90度 解决办法:通过EXIF.getData获取图片信息,判断图片是否旋转 html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&...

    问题:使用layui上传图片的,出现图片旋转90度

    解决办法:通过EXIF.getData获取图片信息,判断图片是否旋转

    
    
    

    html:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="../layui/css/layui.css"  media="all">
        <link rel="stylesheet" href="../css/showImg.css">
    </head>
    <body>
    <div class="layui-upload">
        <button class="layui-btn" id="test1" type="button">上传图片</button>
        <div class="layui-upload-list">
            <img class="layui-upload-img" id="demo1">
            <p id="demoText"></p>
        </div>
    </div>
    
    <script src="../layui/layui.js" charset="utf-8"></script>
    <script src="../js/showImg.js"></script>
    <script type="text/javascript" src="../js/exif.js"></script>
    </body>
    </html>

    js:

    layui.use('upload', function() {
        var $ = layui.jquery
            , upload = layui.upload;
        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            , url: '/upload/'
            , before: function (obj) {
                //预读本地文件示例,不支持ie8
                obj.preview(function (index, file, result) {
                    console.log(file)
                    EXIF.getData(file, function() {
                        //获取图片Orientation
                        orient = EXIF.getTag(this, 'Orientation');
    
                        if(orient==6){//逆时针旋转了90度
                            rotateBase64Img(result,90,callback);
                        }else if(orient==1){
                            $('#demo1').attr('src', result); //图片链接(base64)
                        }
                    });
    
                });
            }
            , done: function (res) {
                //如果上传失败
                if (res.code > 0) {
                    return layer.msg('上传失败');
                }
                //上传成功
            }
            , error: function () {
                //演示失败状态,并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });
    
        //旋转base64图片
        function rotateBase64Img(src, edg, callback) {
            var canvas = document.createElement("canvas");
            var ctx = canvas.getContext("2d");
            var imgW;//图片宽度
            var imgH;//图片高度
            var size;//canvas初始大小
            if (edg % 90 != 0) {
                console.error("旋转角度必须是90的倍数!");
                throw '旋转角度必须是90的倍数!';
            }
            (edg < 0) && (edg = (edg % 360) + 360)
            const quadrant = (edg / 90) % 4; //旋转象限
            const cutCoor = {sx: 0, sy: 0, ex: 0, ey: 0}; //裁剪坐标
            var image = new Image();
            image.crossOrigin = "anonymous"
            image.src = src;
            image.onload = function () {
                imgW = image.width;
                imgH = image.height;
                size = imgW > imgH ? imgW : imgH;
                canvas.width = size * 2;
                canvas.height = size * 2;
                switch (quadrant) {
                    case 0:
                        cutCoor.sx = size;
                        cutCoor.sy = size;
                        cutCoor.ex = size + imgW;
                        cutCoor.ey = size + imgH;
                        break;
                    case 1:
                        cutCoor.sx = size - imgH;
                        cutCoor.sy = size;
                        cutCoor.ex = size;
                        cutCoor.ey = size + imgW;
                        break;
                    case 2:
                        cutCoor.sx = size - imgW;
                        cutCoor.sy = size - imgH;
                        cutCoor.ex = size;
                        cutCoor.ey = size;
                        break;
                    case 3:
                        cutCoor.sx = size;
                        cutCoor.sy = size - imgW;
                        cutCoor.ex = size + imgH;
                        cutCoor.ey = size + imgW;
                        break;
                }
                ctx.translate(size, size);
                ctx.rotate(edg * Math.PI / 180);
                ctx.drawImage(image, 0, 0);
                var imgData = ctx.getImageData(cutCoor.sx, cutCoor.sy, cutCoor.ex, cutCoor.ey);
                if (quadrant % 2 == 0) {
                    canvas.width = imgW;
                    canvas.height = imgH;
                } else {
                    canvas.width = imgH;
                    canvas.height = imgW;
                }
                ctx.putImageData(imgData, 0, 0);
                callback(canvas.toDataURL())
            };
        }
    
        function callback(base64data) {
            document.getElementById("demo1").src = base64data;
        }
    });

     

    展开全文
  • layui 实现图片上传和预览

    万次阅读 2019-05-21 17:42:44
    图片不自动上传并在表单提交时再上传,看代码。...input id="fileName" type="text" lay-verify="fileName" autocomplete="off" class="layui-input" disabled> <#--隐藏输入框 用来存放上传后图片路径--...
  • layui上传图片以及图片预览

    千次阅读 2018-08-12 17:20:28
    1.选择文件后自动上传 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&...../../layui/css/layui
  • layui 多文件上传 预览图 动态删除

    千次阅读 2020-02-01 15:08:39
    源码 <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head lang="en"> <meta charset="utf-8">...layui</title> <meta name="renderer" co...
  • layui在开发文档中提供了 附件上传的方法upload.render(),此篇文章在此模块基础方法上扩展补充了附件预览、删除、下载的实现方法。具体如下: layui 文件/图片上传 layui 相册层 一、html <div class="layui-...
  • 花了三天三夜的时间终于研究出来了 原文:使用 ...text/html; charset=UTF-8" pageEncoding="UTF-8" %&gt; &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt;
  • layui多图片上传并预览

    万次阅读 2018-04-04 10:39:17
    layui多图片上传1.0更新(1)图片上传本地目录(2)删除本地页面图片(非删除本地目录文件图片)一、控制器public function upload(){ $pathName = $this-&gt;request-&gt;param('path');//图片存放的目录 ...
  • label class="layui-form-label">图片label> a class="layui-btn" id="image" style="float: left;">i class="layui-icon">i>上传图片a> div class="layui-input-block" style="margin-left: 220px;"> ...
  • 使用LayUI进行文件上传(带预览功能)

    万次阅读 2019-08-15 16:03:41
    使用LayUI进行文件上传(带预览功能) 1、添加LayUI上传组件需要的js文件 jquery.min.js、layui.all.js、layer.js 2、导入上传组件jar包 commons-fileupload、commons-io 3、在spring配置文件中限制上传文件的大小,...
  • layui上传图片、回显、预览

    千次阅读 2019-12-21 09:40:22
    -- 预览区域 -->  <div class="layui-upload-list">  <img class="layui-upload-img" width="100px" height="80px" id="preShow"/>  <p id="demoText"></p>  </div>  </div> java后台: //...
  • 本文讲解将以实际开发项目中后台添加用户模块中使用到的Layui异步文件上传以及上传图预览功能为例 如果不想Listen Talk只想Show Me Code的话直接拉到文章最后 我将贴上添加用户模块完整的模版文件和控制器相应方法...
  • //按钮 ...layui-form-item"&gt; &lt;label class="layui-form-label"&gt;上传书籍&lt;/label&gt; &lt;div class="layui-input-inline"&gt;
  • layui图片虚拟路径上传,预览和删除

    千次阅读 2019-04-10 10:43:10
    首先我们要过一眼layui的返回参数格式:动态值的json格式,注意如果格式不正确...style type="text/css"> #detailTbody tr:hover { background: #fff; } .layui-form-label { width: 110px; } ...
  • layui实现上传图片鼠标悬浮展示删除及预览图标 ** 进行layui实现图片上传功能时,发现无法实现悬浮展示删除及预览图标功能,查询很多资料后,自己整合一套自己的方法,特此记录 实现功能展示 ...
  • 首先,引入相关文件: <script th:src="@{/js/jquery-1.9.1.js}"></script> <script th:src="@{/js/jquery.form.js}">...link rel="stylesheet" href="/layui/css/layui.css"> 然后,编写HTML代码
  • 我用的layui版本是layui2.2.5 它这个默认不支持阻止图片上传的,所以需要改动框架的upload.js, 改动前 (查找before快速定位): y=function(){return"choose"===t?l.choose&&l.choose(g):(l.before&&l....
  • 关于layui文件上传-- 多图片上传预览

    千次阅读 2018-04-09 11:05:42
    <html> <head> <meta charset='UTF-8'>...meta name='Author' content='wanghua'>...Test upload with Layui2</title> <link rel='stylesheet' href='/assets/lay...
  • style type="text/css"> #detailTbody tr:hover { background: #fff; } .layui-form-label { width: 110px; } .uploader-list { margin-left: -15px; } .uploader-list .info { position: relative; ...
  • *前台* &amp;amp;amp;lt;link rel=&amp;amp;quot;stylesheet&...text/css&.../test/Public/src/layuiadmin/layui/css/layui.css&amp;amp;quot; media=&amp;amp;quot;all&a
  • 关于layui

    2019-03-18 10:10:03
    layui 官网地址:layui 使用方式:下载后导入项目,然后引用即可 先要引用jquery,然后再引用layui.js和layui.css ## layui表单 下面以HTML中最常见的form表单来演示layui的使用。 html部分: &lt;fieldset ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 723
精华内容 289
关键字:

layuitext预览