宝哥软件园

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

编辑:宝哥软件园 来源:互联网 时间:2021-08-20

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

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

下面附上代码

HTML:

div class='layui-upload '按钮类型=' button ' class=' layui-BTN ' id=' test 2 '多图片上传/button block quote class=' layui-elem-quote layui-quote-nm ' style=' margin-top : 10px;宽度: 88%预览图:div class=' layui-uploader-list uploader-list ' style=' overflow : auto;id=' uploader-list '/div/block quote/div CSS :

样式类型='text/css ' .上传者-列表{左边距-:-15px;} .上传者列表。信息{位置:相对;边距-top :-25px;背景-颜色:黑色;颜色:白色;filter: alpha(不透明度=80);-莫兹-奥帕市3360 0.5;opacity: 0.5宽度: 100像素;高度: 25px文本对齐:中心;显示器:无;} .上传者列表。手柄{位置:相对;背景-颜色:黑色;颜色:白色;filter: alpha(不透明度=80);-莫兹-奥帕市3360 0.5;opacity: 0.5宽度: 100像素;文本对齐:右侧;高度: 18px边距-底部:-18px;显示器:无;} .上传者列表。手柄跨度{右边距: 5px} .上传者列表。处理span :悬停{ cursor:指针;} .上传者列表。文件项目{ margin : 12px 0 15 xpadding : 1 px向左浮动:} /stylejs:

上传。render({ elem : ' # test2 ',url: ' ',multiple: true,在:函数(obj){ layer之前。“msg(”图片上传中.'、{icon: 16,shade: 0.01,time: 0})}、done :函数(RES){ layer。关闭(层。msg());//关闭上传提示窗口//上传完毕$(' #上传者列表').追加(' 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 ');}});$(文档)。on('mouseenter mouseleave ',').file-iteme ',函数(事件){ if(事件。type==='鼠标输入'){//鼠标悬浮$(这个)。孩子们。信息')。fadeIn(' fast ');$(这个)。孩子们。手柄')。fadeIn(' fast ');} else if(事件。type==='鼠标离开'){//鼠标离开$(这个)。孩子们。信息')。hide();$(这个)。孩子们。手柄')。hide();} });//删除图片$(文档)。打开('点击','。文件项目手柄',函数(事件){ $(这个).父项()。移除();});以上这篇获得多图上传实现删除功能的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

更多资讯
游戏推荐
更多+