layui多图上传实现删除功能

概述在使用layui的多图上传时发现没有删除功能 在网上搜索解决办法时有的感觉太复杂有的不符合自己所需要的所以就自己动手 下面附上代码 HTML: <div class="layui-upload">    <button type="button" class="layui-btn" id="test2">多图片上传</button> <blockquote class="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: @R_502_6843@;" 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="" >‘ +                    ‘<div ><span ></span></div>‘ +                    ‘<img  src=https://‘+ res.href +‘>‘ +                    ‘<div >‘ + 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多图上传实现删除功能全部内容，希望文章能够帮你解决layui多图上传实现删除功能所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。