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

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

成都创新互联公司专业为企业提供当阳网站建设、当阳做网站、当阳网站设计、当阳网站制作等企业网站建设、网页设计与制作、当阳企业网站模板建站服务,10余年当阳做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。

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

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

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

下面附上代码

HTML:

预览图:

CSS:

 

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(
'
' + '
' + '' + '
' + res.name + '
' + '
' ); } });
  $(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多图上传实现删除功能的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持创新互联。


网站标题:layui多图上传实现删除功能的例子
文章位置:http://bzwzjz.com/article/pjcjpe.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 成都做网站建设公司 LED网站设计方案 网站建设公司 网站设计 成都网站建设 企业网站制作 品牌网站建设 成都网站制作 网站建设方案 成都网站设计 手机网站制作设计 网站制作 成都网站建设 成都网站制作 移动手机网站制作 重庆网站制作 重庆手机网站建设 成都企业网站制作 品牌网站建设 四川成都网站建设 重庆企业网站建设 定制网站建设多少钱