快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

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://6mz.cn/article/pjcjpe.html

其他资讯