阿坝州网站建设公司

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://azwzsj.com/article/pjcjpe.html

其他资讯