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 相关文章推荐
点击显示指定元素隐藏其他同辈元素的方法
Feb 19 Javascript
JS实现从表格中动态删除指定行的方法
Mar 31 Javascript
JS实现的简洁二级导航菜单雏形效果
Oct 13 Javascript
微信小程序 wxapp地图 map详解
Oct 31 Javascript
JS判断两个对象内容是否相等的方法示例
Apr 10 Javascript
JS非空验证及邮箱验证的实例
Aug 11 Javascript
Vuejs 实现简易 todoList 功能 与 组件实例代码
Sep 10 Javascript
基于mpvue小程序使用echarts画折线图的方法示例
Apr 24 Javascript
微信小程序图片左右摆动效果详解
Jul 13 Javascript
jquery实现进度条状态展示
Mar 26 jQuery
vue中实现图片压缩 file文件的方法
May 28 Javascript
JavaScript实时更新当前的时间的示例代码
Jul 15 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
PHP三层结构(上) 简单三层结构
2010/07/04 PHP
VIM中设置php自动缩进为4个空格的方法详解
2013/06/14 PHP
PHP实现将HTML5中Canvas图像保存到服务器的方法
2014/11/28 PHP
php实现的通用图片处理类
2015/03/24 PHP
php-redis中的sort排序函数总结
2015/07/08 PHP
[原创]php集成安装包wampserver修改密码后phpmyadmin无法登陆的解决方法
2016/11/23 PHP
js window.onload 加载多个函数的方法
2009/11/02 Javascript
被jQuery折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
2010/01/22 Javascript
JS控制显示隐藏兼容问题(IE6、IE7、IE8)
2010/04/01 Javascript
js控制分页打印、打印分页示例
2014/02/08 Javascript
nodejs通过phantomjs实现下载网页
2015/05/04 NodeJs
javascript轮播图算法
2016/10/21 Javascript
浅谈NodeJs之数据库异常处理
2017/10/25 NodeJs
微信小程序websocket实现聊天功能
2020/03/30 Javascript
微信小程序页面间值传递的两种方法
2018/11/26 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
2019/09/28 Javascript
javascript实现摄像头拍照预览
2019/09/30 Javascript
python编程开发之日期操作实例分析
2015/11/13 Python
对于Python中RawString的理解介绍
2016/07/07 Python
python绘制双柱形图代码实例
2017/12/14 Python
浅谈Python里面小数点精度的控制
2018/07/16 Python
浅谈tensorflow中几个随机函数的用法
2018/07/27 Python
使用Python+wxpy 找出微信里把你删除的好友实例
2019/02/21 Python
Python 使用matplotlib模块模拟掷骰子
2019/08/08 Python
Python实现多线程下载脚本的示例代码
2020/04/03 Python
利用python进行文件操作
2020/12/04 Python
python 模拟登陆github的示例
2020/12/04 Python
前端H5 Video常见使用场景简介
2020/08/21 HTML / CSS
美国最大的网络男装服装品牌:Bonobos
2017/05/25 全球购物
BISSELL官网:北美吸尘器第一品牌
2019/03/14 全球购物
历史学专业求职信
2014/06/19 职场文书
风之谷观后感
2015/06/11 职场文书
在职证明格式样本
2015/06/15 职场文书
中学生打架检讨书之500字
2019/08/06 职场文书
解析:创业计划书和商业计划书二者之间到底有什么区别
2019/08/14 职场文书
《风不能把阳光打败》读后感3篇
2020/01/06 职场文书