layui实现多图片上传并限制上传的图片数量
时间:2019-09-26
本文章向大家介绍layui实现多图片上传并限制上传的图片数量,主要包括layui实现多图片上传并限制上传的图片数量使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
废话不多说了,直接上代码吧!
//给图片添加删除 function mouseChange() { $(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(); } }); } mouseChange(); //json的length function getJsonLength(jsonData){ var jsonLength = 0; for(var item in jsonData){ jsonLength++; } return jsonLength; } //多图片上传 var ImgList = $('#uploader-list'),uploadListIns =upload.render({ elem: '#chooseImg', url: $("#projectUrl").val()+ '/img/imgUpload.do', accept: 'images', acceptMime: 'image/jpg,image/png,image/jpeg', exts: 'jpg|png|jpeg', size: 1024, multiple: true, auto: true, choose: function(obj){ var files = obj.pushFile(); //将每次选择的文件追加到文件队列 var len = getJsonLength(files); //读取本地文件 obj.preview(function (index, file, result) { if (parseInt(len)+parseInt(coachPicsArray.length)-count > 6){ layer.msg("门店图片不能超过6张"); //遍历 $.each(files,function(_key){ var key = _key; var value = files[_key]; if(_key == index) { //删除 delete files[_key]; } }); }else { var reader = new FileReader(); reader.onload = function (e) { var image = new Image(); image.onload = function () { var realWidth = image.width; var realHeight = image.height; var tr = $(['<div id="upload-' + index + '" class="file-iteme">' + '<div class="removeIcon handle"> <i class="layui-icon" style="color: white ;margin-right: 40%"></i></div>' + '<img style="color: white;width: 120px" "showBig(this)" src=' + result + ' id="img-' + index + '">' + '</div>'].join('')); //删除 tr.find('.handle').on('click', function () { $(this).parent().remove(); delete files[index]; //删除对应的文件 var value = $("#clubCoachPics").val().split(","); var arr = []; for( var i in value){ if (value[i] != $(this).next().data('value')){ arr.push(value[i]); } } $("#clubCoachPics").val(arr.join(",")) ; }); ImgList.append(tr); }; image.src = result; }; //正式读取文件 reader.readAsDataURL(file); } }); }, before: function (obj) { layer.msg('图片上传中...', { icon: 16, shade: 0.01, time: 3000 }) }, done: function (res, index, upload) { $("#img-"+ index + "").attr("data-value",res.imgUrl); if(res.code == 0){ //上传成功 var imgUrl = $("#clubCoachPics").val(); if(imgUrl==null||imgUrl==""){ $("#clubCoachPics").val(res.imgUrl); }else{ $("#clubCoachPics").val(imgUrl+","+res.imgUrl); } delete files[index]; //删除文件队列已经上传成功的文件 return; }; } });
以上这篇layui实现多图片上传并限制上传的图片数量就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
- 线上服务 CPU 100%?一键定位 so easy!
- 设置输出延迟
- 设置输入延时约束
- MySQL 死锁与日志二三事
- 一千个不用 Null 的理由
- TensorFlow强化学习入门(1.5)——上下文赌博机
- 以太坊·代币开发详解
- JSON Web Token - 在Web应用间安全地传递信息
- TensorFlow强化学习入门(2)——基于策略的Agents
- 用ABAP 生成二维码 QR Code
- CDS view注解解析 - @Environment.systemField
- Document flow API in SAP CRM and C4C
- Python基础知识4:文件操作
- Python基础知识6:格式化字符、颜色
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 了解不同架构思维,赏析架构之美
- 【Rust日报】2020-08-22 google/autocxx - 高度自动化的rust调用c++,而且安全,时尚
- 【Rust日报】2020-08-24 理解 Rust 的切片
- 猿实战05——手把手教你拥有自己的代码生成器
- Java单元测试——容器内部测试
- Java单元测试——框架(三)——testNG
- Nginx系列:后端服务应用健康检测
- 那些大厂必问的Handler和Binder,有必要去研究么?
- 欢迎来到 TreeMap 的吐槽大会
- OMG,12 个精致的 Java 字符串操作小技巧,学它
- Nginx系列:安全下载模块
- 5分钟入门GANS:原理解释和keras代码实现
- 使用ML 和 DNN 建模的技巧总结
- 医学图像分割模型U-Net介绍和Kaggle的Top1解决方案源码解析
- 机器学习中的音频特征:理解Mel频谱图