So laden Sie mehrere Bilder in Laui hoch, um die Löschfunktion zu implementieren-Layui-Tutorial-php.cn

So laden Sie mehrere Bilder in Laui hoch, um die Löschfunktion zu implementieren

尚

Freigeben： 2020-01-06 17:39:32

nach vorne

4427 Leute haben es durchsucht

So laden Sie mehrere Bilder in Laui hoch, um die Löschfunktion zu implementieren

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

So laden Sie mehrere Bilder in Laui hoch, um die Löschfunktion zu implementieren

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

So laden Sie mehrere Bilder in Laui hoch, um die Löschfunktion zu implementieren

下面附上代码

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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="So laden Sie mehrere Bilder in Laui hoch, um die Löschfunktion zu implementieren" >&#39; +
                    &#39;<div class="info">&#39; + res.data.title + &#39;</div>&#39; +
                    &#39;</div>&#39;
                );
            }
        });

Nach dem Login kopieren

$(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();
            }
        });

Nach dem Login kopieren

 // 删除图片
        $(document).on("click", ".file-iteme .handle", function(event){
            $(this).parent().remove();  
        });

Nach dem Login kopieren

thinkphp处理上传文件

public function upload(){
        //exit(ROOT_PATH . &#39;public&#39; . DS . &#39;uploads&#39;);
        // 获取表单上传文件 例如上传了00So laden Sie mehrere Bilder in Laui hoch, um die Löschfunktion zu implementieren
        $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;
        }
    }

Nach dem Login kopieren

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

Das obige ist der detaillierte Inhalt vonSo laden Sie mehrere Bilder in Laui hoch, um die Löschfunktion zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!