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

 更新时间:2019年09月23日 15:29:16   作者:蚕豆的生活  
今天小编就为大家分享一篇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多图上传实现删除功能的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 移动端刮刮乐的实现方式(js+HTML5)

    移动端刮刮乐的实现方式(js+HTML5)

    本篇文章主要介绍了移动端刮刮乐的实现方法以及实现代码。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • JS刷新父窗口的几种方式小结(推荐)

    JS刷新父窗口的几种方式小结(推荐)

    下面小编就为大家带来一篇JS刷新父窗口的几种方式小结(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • javascript+xml技术实现分页浏览

    javascript+xml技术实现分页浏览

    基于web的技术中,分页是一个老的不能再老的,但大家津津乐道的问题,随着xml技术的日渐应用,把xml应用到分页当中,也是一种可能,当然网上的教程很多,当我都是看得稀里糊涂,索性自己写一个,与大家分享、指正。
    2008-07-07
  • 微信小程序实现手写签名(签字版)

    微信小程序实现手写签名(签字版)

    这篇文章主要为大家详细介绍了微信小程序实现手写签名,签字版,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • axios实现取消请求的方法详解

    axios实现取消请求的方法详解

    axios 是现在前端项目中最常使用的一个请求库,目前 Github star 已经达到了 104k star,本文我们讨论的问题是axios 是如何实现取消请求(Cancel requests)的,文中有详细的实现方法,感兴趣的朋友可以参考下
    2024-04-04
  • JavaScript实现模态框拖拽效果

    JavaScript实现模态框拖拽效果

    这篇文章主要介绍了通过JavaScript实现模态框拖拽的效果,以及鼠标松开,可以停止拖动模态框移动等功能,感兴趣的小伙伴可以了解一下
    2021-12-12
  • JavaScript前端巧妙实现数据实时更新详解

    JavaScript前端巧妙实现数据实时更新详解

    作为开发者,我们常面对复杂的开发环境,要应对即时通讯与数据实时更新的问题,那么该如何精准高效实现这些功能呢,下面小编就来和大家简单讲讲
    2025-03-03
  • js实现html滑动图片拼图验证

    js实现html滑动图片拼图验证

    这篇文章主要为大家详细介绍了js实现html滑动图片拼图验证,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-06-06
  • 详解设置Webstorm 利用babel将ES6自动转码成ES5

    详解设置Webstorm 利用babel将ES6自动转码成ES5

    这篇文章主要介绍了详解设置Webstorm 利用babel将ES6自动转码成ES5,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • JavaScript中concat复制数组方法浅析

    JavaScript中concat复制数组方法浅析

    在本篇文章里小编给大家总结了关于JavaScript中concat复制数组方法知识点,有需要的朋友们可以学习下。
    2019-01-01

最新评论