博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
layui上传图片,预览图片,删除图片,放大预览
阅读量:4097 次
发布时间:2019-05-25

本文共 1280 字,大约阅读时间需要 4 分钟。

界面选择图片后如下显示:

点击每张图片的时候,放大预览

 

 

var upload = layui.upload;
关键代码:选择图片后
 
choose: function (obj) {    //将每次选择的文件追加到文件队列    var files = obj.pushFile();    //预读本地文件,如果是多文件,则会遍历。(不支持ie8/9)    obj.preview(function (index, file, result) {        if (file.size > 0 && $('#ImgPreview').find('img').length === 0) {            $('#ImgPreview').empty();        }        // 添加图片 ImgPreview-预览的dom元素的id        $('#ImgPreview').append('
' + '
' + file.name + '
'); //删除某图片 $("#upload_img_" + index).bind('click', function () { delete files[index];/ $("#container"+index).remove(); }); //某图片放大预览 $("#showImg"+index).bind('click',function () { var width = $("#showImg"+index).width(); var height = $("#showImg"+index).height(); var scaleWH = width/height; var bigH = 600; var bigW = scaleWH*bigH; if(bigW>900){ bigW = 900; bigH = bigW/scaleWH; } // 放大预览图片 layer.open({ type: 1, title: false, closeBtn: 1, shadeClose: true, area: [bigW + 'px', bigH + 'px'], //宽高 content: "" }); }); });

 

 

 

 

 

你可能感兴趣的文章
数据结构与算法7-栈
查看>>
Java并发编程 | 一不小心就死锁了,怎么办?
查看>>
(python版)《剑指Offer》JZ01:二维数组中的查找
查看>>
(python版)《剑指Offer》JZ06:旋转数组的最小数字
查看>>
(python版)《剑指Offer》JZ13:调整数组顺序使奇数位于偶数前面
查看>>
(python版)《剑指Offer》JZ28:数组中出现次数超过一半的数字
查看>>
(python版)《剑指Offer》JZ30:连续子数组的最大和
查看>>
(python版)《剑指Offer》JZ32:把数组排成最小的数
查看>>
(python版)《剑指Offer》JZ02:替换空格
查看>>
JSP/Servlet——MVC设计模式
查看>>
使用JSTL
查看>>
Java 8新特性:Stream API
查看>>
管理用户状态——Cookie与Session
查看>>
最受欢迎的前端框架Bootstrap 入门
查看>>
JavaScript编程简介:DOM、AJAX与Chrome调试器
查看>>
通过Maven管理项目依赖
查看>>
通过Spring Boot三分钟创建Spring Web项目
查看>>
Spring的IoC(依赖注入)原理
查看>>
Guava快速入门
查看>>
Java编程基础:static的用法
查看>>