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 validate.js表单验证的基本用法入门
May 13 Javascript
20个实用的JavaScript技巧分享
Nov 28 Javascript
jquery实现炫酷的叠加层自动切换特效
Feb 01 Javascript
js控制div弹出层实现方法
May 11 Javascript
JS实现点击复选框将按钮或文本框变为灰色不可用的方法
Aug 11 Javascript
iframe中子父类窗口调用JS的方法及注意事项
Aug 25 Javascript
学习javascript面向对象 理解javascript原型和原型链
Jan 04 Javascript
jQuery.Form实现Ajax上传文件同时设置headers的方法
Jun 26 jQuery
基于JavaScript实现无缝滚动效果
Jul 21 Javascript
vue中锚点的三种方法
Jul 06 Javascript
详解实现一个通用的“划词高亮”在线笔记功能
Apr 23 Javascript
vue vant中picker组件的使用
Nov 03 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
要会喝咖啡也要会知道咖啡豆
2021/03/03 咖啡文化
一些php技巧与注意事项分析
2011/02/03 PHP
深入php函数file_get_contents超时处理的方法详解
2013/06/03 PHP
通过dbi使用perl连接mysql数据库的方法
2014/04/16 PHP
php实现给一张图片加上水印效果
2016/01/02 PHP
php中str_pad()函数用法分析
2017/03/28 PHP
PHP观察者模式定义与用法实例分析
2019/03/22 PHP
laravel高级的Join语法详解以及使用Join多个条件
2019/10/16 PHP
jquery插件珍藏(图片局部放大/信息提示框)
2013/01/08 Javascript
详解jquery uploadify 上传文件
2013/11/09 Javascript
JQuery each打印JS对象的方法
2013/11/13 Javascript
jquery复选框多选赋值给文本框的方法
2015/01/27 Javascript
JavaScript利用HTML DOM进行文档操作的方法
2016/03/28 Javascript
纯js代码制作的网页时钟特效【附实例】
2016/03/30 Javascript
浅谈JS中的bind方法与函数柯里化
2016/08/10 Javascript
JavaScript实现打地鼠小游戏
2020/04/23 Javascript
js原生日历的实例(推荐)
2017/10/31 Javascript
NodeJs form-data格式传输文件的方法
2017/12/13 NodeJs
AngularJS动态添加数据并删除的实例
2018/02/27 Javascript
微信小程序通过js实现瀑布流布局详解
2019/08/28 Javascript
Vue路由 重定向和别名的区别说明
2020/09/09 Javascript
[00:11]战神迅矛
2019/03/06 DOTA
python开发之for循环操作实例详解
2015/11/12 Python
使用Python绘制图表大全总结
2017/02/11 Python
Python 查找字符在字符串中的位置实例
2018/05/02 Python
django+xadmin+djcelery实现后台管理定时任务
2018/08/14 Python
pandas中的series数据类型详解
2019/07/06 Python
使用Python求解带约束的最优化问题详解
2020/02/11 Python
几款Python编译器比较与推荐(小结)
2020/10/15 Python
Python中Pyspider爬虫框架的基本使用详解
2021/01/27 Python
CSS3 3D位移translate效果实例介绍
2016/05/03 HTML / CSS
澳大利亚领先的在线礼品网站:Gifts Australia
2020/08/15 全球购物
《雷雨》教学反思
2014/02/20 职场文书
纪念九一八事变演讲稿:牢记历史,捍卫主权
2014/09/14 职场文书
学生上课看漫画的检讨书
2014/09/26 职场文书
关爱留守儿童捐款倡议书
2015/04/27 职场文书