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 相关文章推荐
javascript 操作Word和Excel的实现代码
Oct 26 Javascript
jquery多浏览器捕捉回车事件代码
Jun 22 Javascript
js获取电脑分辨率的思路及操作
Nov 22 Javascript
angular中使用路由和$location切换视图
Jan 23 Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
Apr 06 Javascript
详解Angular路由 ng-route和ui-router的区别
May 22 Javascript
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
Jan 09 Javascript
vue--点击当前增加class,其他删除class的方法
Sep 15 Javascript
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 jQuery
vue elementUI table表格数据 滚动懒加载的实现方法
Apr 04 Javascript
微信公众平台 客服接口发消息的实现代码(Java接口开发)
Apr 17 Javascript
JS实现基本的网页计算器功能示例
Jan 16 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
在apache下限制每个虚拟主机的并发数!!!!
2006/10/09 PHP
php 字符串替换的方法
2012/01/10 PHP
PHP关于htmlspecialchars、strip_tags、addslashes的解释
2014/07/04 PHP
win7安装php框架Yii的方法
2016/01/25 PHP
PHP+Ajax验证码验证用户登录
2016/07/20 PHP
基于Jquery与WebMethod投票功能实现代码
2011/01/19 Javascript
JavaScript实现图片DIV竖向滑动的方法
2015/04/25 Javascript
基于html5和nodejs相结合实现websocket即使通讯
2015/11/19 NodeJs
JavaScript如何实现对数字保留两位小数一位自动补零
2015/12/18 Javascript
JavaScript绑定事件监听函数的通用方法
2016/05/14 Javascript
js获取所有checkbox的值的简单实例
2016/05/30 Javascript
BootStrap网页中代码显示用法详解
2016/10/21 Javascript
javascript基本常用排序算法解析
2017/09/27 Javascript
JS获取当前地理位置的方法
2017/10/25 Javascript
通过fastclick源码分析彻底解决tap“点透”
2017/12/24 Javascript
详解webpack之scss和postcss-loader的配置
2018/01/09 Javascript
layui实现根据table数据判断按钮显示情况的方法
2019/09/26 Javascript
vue实现将数据存入vuex中以及从vuex中取出数据
2019/11/08 Javascript
[01:16:01]VGJ.S vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
python实现批量改文件名称的方法
2015/05/25 Python
python if not in 多条件判断代码
2016/09/21 Python
Python使用asyncio包处理并发详解
2017/09/09 Python
基于Python开发chrome插件的方法分析
2018/07/07 Python
详解pandas如何去掉、过滤数据集中的某些值或者某些行?
2019/05/15 Python
Python函数参数匹配模型通用规则keyword-only参数详解
2019/06/10 Python
Python-openCV开运算实例
2020/07/05 Python
长青弘远的面试题
2012/06/09 面试题
测绘工程个人的自我评价
2013/11/23 职场文书
大学生期末自我鉴定
2014/02/01 职场文书
生物工程专业求职信
2014/09/03 职场文书
个人房屋租赁合同(标准范本)
2019/09/16 职场文书
python 中的@运算符使用
2021/05/26 Python
SQL语句中JOIN的用法场景分析
2021/07/25 SQL Server
Go语言实现Base64、Base58编码与解码
2021/07/26 Golang
腾讯云服务器部署前后分离项目之前端部署
2022/06/28 Servers
Python+SeaTable实现计算两个日期间的工作日天数
2022/07/07 Python