layui多圖上傳實現刪除功能的方法

發布: 2020-01-06 17:39:32
轉載
4456 人瀏覽過

layui多圖上傳實現刪除功能的方法

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

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: auto;" 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 i {
            margin-right: 5px;
        }
 
        .uploader-list .handle i:hover {
            cursor: pointer;
        }
 
        .uploader-list .file-iteme {
            margin: 12px 0 0 15px;
            padding: 1px;
            float: left;
        }
    </style>
登入後複製

js:

upload.render({
            elem: &#39;#test2&#39;
            ,url: &#39;&#39;
            ,multiple: true
            ,before: function(obj){
                layer.msg(&#39;图片上传中...&#39;, {
                    icon: 16,
                    shade: 0.01,
                    time: 0
                })
            }
            ,done: function(res){
                layer.close(layer.msg());//关闭上传提示窗口
                //上传完毕
                $(&#39;#uploader-list&#39;).append(
                    &#39;<div id="" class="file-iteme">&#39; +
                    &#39;<div class="handle"><i class="layui-icon layui-icon-delete"></i></div>&#39; +
                    &#39;<img    style="max-width:90%" src=&#39;+ res.data.src +&#39; alt="layui多圖上傳實現刪除功能的方法" >&#39; +
                    &#39;<div class="info">&#39; + res.data.title + &#39;</div>&#39; +
                    &#39;</div>&#39;
                );
            }
        });
登入後複製
$(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();  
        });
登入後複製

thinkphp处理上传文件

public function upload(){
        //exit(ROOT_PATH . &#39;public&#39; . DS . &#39;uploads&#39;);
        // 获取表单上传文件 例如上传了00layui多圖上傳實現刪除功能的方法
        $file = request()->file(&#39;file&#39;);
        // 移动到框架应用根目录/public/uploads/ 目录下
        if($file){
            $info = $file->validate([&#39;size&#39;=>2097152,&#39;ext&#39;=>&#39;jpg,png,gif&#39;])->move(ROOT_PATH . &#39;public&#39; . DS . &#39;uploads&#39;); //限定2MB
            if($info){
                $src=&#39;./uploads/&#39;.str_replace(&#39;\\&#39;,"/",$info->getSaveName());
                $image = Image::open($src);
                $image->thumb(750, 750)->save($src);//压缩图片大小
                $res[&#39;code&#39;]=0;
                $res[&#39;msg&#39;]=&#39;上传成功!&#39;;
                $res[&#39;data&#39;][&#39;src&#39;]=&#39;/uploads/&#39;.str_replace(&#39;\\&#39;,"/",$info->getSaveName());
                $res[&#39;data&#39;][&#39;title&#39;]=$info->getFilename();
            }else{
                // 上传失败获取错误信息
                $res[&#39;code&#39;]=1;
                $res[&#39;msg&#39;]=&#39;上传失败!&#39;.$file->getError();
            }
            return $res;
        }
    }
登入後複製

更多layui知识请关注PHP中文网layui使用教程栏目。

以上是layui多圖上傳實現刪除功能的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:cnblogs.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板