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;};}});

之前的代码时最初的版本，在公司原有的代码基础上修改的，时间久远，很多参数我也忘记了，更新一下后来的版本。

        //给图片添加删除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();//图片删除事件$(document).on("click", ".file-iteme .handle", function(event){var currentImgUrl = $(this).next().data('value');var values = $("#clubCoachPics").val().split(",");var imageIndex = $(this).next().attr('index');var that = $(this);layer.confirm('您确定要删除这张图片么？', {btn: ['确认','不要'] //按钮}, function(index){$.ajax({type:"post",url:$("#projectUrl").val()+"/clubInfo/deleteClubCoachPics.do",data:"id="+$("#id").val()+"&str="+currentImgUrl,success:function(res){if(res.code==0){var arr = [];for( var i in values){if (values[i] != currentImgUrl){arr.push(values[i]);}}$("#clubCoachPics").val(arr.join(",")) ;if(imageIndex != null && imageIndex != ''){delete files[imageIndex]; //删除对应的文件}that.parent().remove();layer.close(index);layer.msg('删除成功');}else{layer.msg(res.msg);}}})})});var index;//多图片上传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,number:6,before: function(obj){files = obj.pushFile(); //将每次选择的文件追加到文件队列var fileLength = Object.keys(files).length;var early = $("#clubCoachPics").val();if (early == ""|| early == null){early = 0;}else {early =early .split(",").length}var imgLength = early + fileLength;if(imgLength > 6) {layer.msg('上传图片数量不能超过6张', {icon: 2,time: 1500});//遍历obj.preview(function (index, file, result) {$.each(files, function (_key) {var key = _key;var value = files[_key];if (_key == index) {  //删除delete files[_key];}});});return false;}else{index = layer.msg('正在上传，请稍候', {icon: 16,shade: 0.01,time: 150000*10});//读取本地文件obj.preview(function (index, file, result) {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 imgSrc">' +'<div class="removeIcon handle"> <i class="layui-icon" style="color: white"></i></div>' +'<img style="color: white;width: 100px" "showBig(this)" src=' + result + ' id="img-' + index + '" index="' + index + '">' +'</div>'].join(''));ImgList.append(tr);};image.src = result;};//正式读取文件reader.readAsDataURL(file);});}},done: function (res, index, upload) {$("#img-"+ index + "").attr("data-value",res.imgUrl);if(res.code == 0){ //上传成功layer.msg("上传成功",{id:1});var imgUrl = $("#clubCoachPics").val();if(imgUrl==null||imgUrl==""){$("#clubCoachPics").val(res.imgUrl);}else{$("#clubCoachPics").val(imgUrl+","+res.imgUrl);}}else{$('#upload-'+ index).remove();layer.msg('上传失败，请重新上传');}delete files[index]; //删除文件队列已经上传成功的文件return;},error: function(index, upload){$('#upload-'+ index).remove();delete files[index];layer.msg('上传失败，请重新上传');}});

layui多图片上传并限制上传的图片数量相关推荐

ThinkPHP5整合LayUI编辑器图片上传
2019独角兽企业重金招聘Python工程师标准>>> 一.创建上传方法 public function uploadimg(){$image = $_FILES['file'];$ ...
php 多图上传编辑器,ThinkPHP5整合LayUI编辑器图片上传
一.创建上传方法 public function uploadimg() { $image = $_FILES['file']; $filebase = file_get_contents($imag ...
.net mvc + layui做图片上传（二）—— 使用流上传和下载图片
摘要:上篇文章写到一种上传图片的方法,其中提到那种方法的局限性,就是上传的文件只能保存在本项目目录下,在其他目录中访问不到该文件.这与浏览器的安全性机制有关,浏览器不允许用户用任意的路径访问服务器上的 ...
.Net之Layui多图片上传
前言: 多图上传在一些特殊的需求中我们经常会遇到,其实多图上传的原理大家都有各自的见解.对于Layui多图上传和我之前所说的通过js获取文本框中的文件数组遍历提交的原理一样,只不过是Layui中的up ...
PHP配合layUI实现图片上传实例
一.下载layui部署到项目,在页面引入layui.css和layui.js. 二.html代码 <div class="layui-form-item"> & ...
layui上传图片列表展示_ThinkPHP5+Layui实现图片上传加预览功能
html代码上传封面 js代码 var uploadInst = upload.render({ elem:'#cover' ,url:'addCourse' ,accept:'file' // 允 ...
ssm+layui实现图片的上传与读取
ssm+layui实现图片的上传与读取图片上传确实是一个项目比较核心的技术,我的项目并没有用到传统的富文本上传,而是将图片先热部署到tomcat,在上存储到数据库,读取的时候同样使用此方法. 图片上 ...
ASP.NET MVC +Layui 实现图片上传功能
ASP.NET MVC +Layui 实现图片上传功能这是一个前端的添加功能只展示图片添加的前端代码 <div class="layui-upload"> < ...
上传文件删除上传文件——前端layui
一.添加页面添加页面代码 <div class="layui-form-item-row" style="margin-top: 10px;">& ...
layui上传文件php上传接口异常,layui.upload上传图片报错“请求上传接口出现异常”...
layui.upload上传图片报错"请求上传接口出现异常"且接口报404问题在调试layui.upload上传图片时候报错"请求上传接口出现异常": 且接口 ...

layui多图片上传并限制上传的图片数量

layui多图片上传并限制上传的图片数量相关推荐

最新文章

热门文章