layui多图上传实现删除功能的例子


Posted in Javascript onSeptember 23, 2019

在使用layui的多图上传时发现没有删除功能

layui多图上传实现删除功能的例子

在网上搜索解决办法时有的感觉太复杂有的不符合自己所需要的所以就自己动手

layui多图上传实现删除功能的例子

下面附上代码

HTML:

<div class="layui-upload">
 <button type="button" class="layui-btn" id="test2">多图片上传</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">
         
  </div>
 </blockquote>
</div>

CSS:

<style type="text/css">
  .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 span {
   margin-right: 5px;
  }
 
  .uploader-list .handle span:hover {
   cursor: pointer;
  }
 
  .uploader-list .file-iteme {
   margin: 12px 0 0 15px;
   padding: 1px;
   float: left;
  }
 </style>

js:

upload.render({
elem: '#test2'
,url: ''
,multiple: true
,before: function(obj){
layer.msg('图片上传中...', {
icon: 16,
shade: 0.01,
time: 0
})
}

,done: function(res){
layer.close(layer.msg());//关闭上传提示窗口
//上传完毕
$('#uploader-list').append(
'<div id="" class="file-iteme">' +
'<div class="handle"><span class="glyphicon glyphicon-trash"></span></div>' +
'<img style="width: 100px;height: 100px;" src=https://'+ res.href +'>' +
'<div class="info">' + res.name + '</div>' +
'</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();
   }
  });
// 删除图片
  $(document).on("click", ".file-iteme .handle", function(event){
   $(this).parent().remove(); 
  });

以上这篇layui多图上传实现删除功能的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 获取对象 定位子对象
May 31 Javascript
用js实现博客打赏功能
Oct 24 Javascript
使用node.js中的Buffer类处理二进制数据的方法
Nov 26 Javascript
动态加载css方法实现和深入解析
Jan 18 Javascript
jQuery EasyUI 页面加载等待及页面等待层
Feb 06 Javascript
React利用插件和不用插件实现双向绑定的方法详解
Jul 03 Javascript
轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)
Sep 06 Javascript
angular4中关于表单的校验示例
Oct 16 Javascript
AngularJS实现的获取焦点及失去焦点时的表单验证功能示例
Oct 25 Javascript
vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果
Apr 08 Javascript
js实现无限层级树形数据结构(创新算法)
Feb 27 Javascript
在antd Table中插入可编辑的单元格实例
Oct 28 Javascript
layui 上传插件 带预览 非自动上传功能的实例(非常实用)
Sep 23 #Javascript
详解从vue-loader源码分析CSS Scoped的实现
Sep 23 #Javascript
layer ui 导入文件之前传入数据的实例
Sep 23 #Javascript
Node.js实现简单管理系统
Sep 23 #Javascript
webpack的pitching loader详解
Sep 23 #Javascript
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
Sep 23 #Javascript
深入探索VueJS Scoped CSS 实现原理
Sep 23 #Javascript
You might like
phpMyadmin 用户权限中英对照
2010/04/02 PHP
php中get_meta_tags()、CURL与user-agent用法分析
2014/12/16 PHP
php使用PDO操作MySQL数据库实例
2014/12/30 PHP
php强制更新图片缓存的方法
2015/02/11 PHP
基于php的CMS中展示文章类实例分析
2015/06/18 PHP
CI(CodeIgniter)框架视图中加载视图的方法
2017/03/24 PHP
PHP封装的简单连接MongoDB类示例
2019/02/13 PHP
Ruffy javascript 学习笔记
2009/11/30 Javascript
如何获取JQUERY AJAX返回的JSON结果集实现代码
2012/12/10 Javascript
jQuery中end()方法用法实例
2015/01/08 Javascript
实例详解jQuery表单验证插件validate
2016/01/18 Javascript
js+canvas简单绘制圆圈的方法
2016/01/28 Javascript
Javascript中的几种继承方式对比分析
2016/03/22 Javascript
KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
2016/10/10 Javascript
jQuery插件JWPlayer视频播放器用法实例分析
2017/01/11 Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
2017/05/17 Javascript
vue中实现图片和文件上传的示例代码
2018/03/16 Javascript
微信小程序项目总结之点赞 删除列表 分享功能
2018/06/25 Javascript
vue获取时间戳转换为日期格式代码实例
2019/04/17 Javascript
微信小程序new Date()方法失效问题解决方法
2019/07/29 Javascript
[01:12]DOTA2次级职业联赛 - Newbee.Y 战队宣传片
2014/12/01 DOTA
[01:03:36]DOTA2-DPC中国联赛 正赛 VG vs Magma BO3 第二场 1月26日
2021/03/11 DOTA
Python打印scrapy蜘蛛抓取树结构的方法
2015/04/08 Python
Python对象转JSON字符串的方法
2016/04/27 Python
Python中在for循环中嵌套使用if和else语句的技巧
2016/06/20 Python
详解如何将python3.6软件的py文件打包成exe程序
2018/10/09 Python
pandas.cut具体使用总结
2019/06/24 Python
pymysql模块的使用(增删改查)详解
2019/09/09 Python
tensorflow生成多个tfrecord文件实例
2020/02/17 Python
python如何处理程序无法打开
2020/06/16 Python
实列教程 一款基于jquery和css3的响应式二级导航菜单
2014/11/13 HTML / CSS
Under Armour西班牙官网:美国知名的高端功能性运动品牌
2018/12/12 全球购物
公关关系专员的自我评价分享
2013/11/20 职场文书
县政府办公室领导班子对照检查材料思想汇报
2014/09/28 职场文书
2015年预备党员自我评价
2015/03/04 职场文书
发工资啦!教你用Python实现邮箱自动群发工资条
2021/05/10 Python