layui多圖上傳時(shí)如何實(shí)現(xiàn)刪除功能？

在使用layui的多圖上傳時(shí)發(fā)現(xiàn)沒(méi)有刪除功能

商河ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書(shū)未來(lái)市場(chǎng)廣闊！成為成都創(chuàng)新互聯(lián)公司的ssl證書(shū)銷(xiāo)售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18980820575（備注：SSL證書(shū)合作）期待與您的合作！

layui多圖上傳時(shí)如何實(shí)現(xiàn)刪除功能？

在網(wǎng)上搜索解決辦法時(shí)有的感覺(jué)太復(fù)雜有的不符合自己所需要的所以就自己動(dòng)手

layui多圖上傳時(shí)如何實(shí)現(xiàn)刪除功能？

下面附上代碼

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%">
        預(yù)覽圖：
        <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: '#test2'
            ,url: ''
            ,multiple: true
            ,before: function(obj){
                layer.msg('圖片上傳中...', {
                    icon: 16,
                    shade: 0.01,
                    time: 0
                })
            }
            ,done: function(res){
                layer.close(layer.msg());//關(guān)閉上傳提示窗口
                //上傳完畢
                $('#uploader-list').append(
                    '<div id="" class="file-iteme">' +
                    '<div class="handle"><i class="layui-icon layui-icon-delete"></i></div>' +
                    '<img style="width: 100px;height: 100px;" src='+ res.data.src +'>' +
                    '<div class="info">' + res.data.title + '</div>' +
                    '</div>'
                );
            }
        });
$(document).on("mouseenter mouseleave", ".file-iteme", function(event){
            if(event.type === "mouseenter"){
                //鼠標(biāo)懸浮
                $(this).children(".info").fadeIn("fast");
                $(this).children(".handle").fadeIn("fast");
            }else if(event.type === "mouseleave") {
                //鼠標(biāo)離開(kāi)
                $(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 . 'public' . DS . 'uploads');
        // 獲取表單上傳文件 例如上傳了001.jpg
        $file = request()->file('file');
        // 移動(dòng)到框架應(yīng)用根目錄/public/uploads/ 目錄下
        if($file){
            $info = $file->validate(['size'=>2097152,'ext'=>'jpg,png,gif'])->move(ROOT_PATH . 'public' . DS . 'uploads'); //限定2MB
            if($info){
                $src='./uploads/'.str_replace('\\',"/",$info->getSaveName());
                $image = Image::open($src);
                $image->thumb(750, 750)->save($src);//壓縮圖片大小
                $res['code']=0;
                $res['msg']='上傳成功！';
                $res['data']['src']='/uploads/'.str_replace('\\',"/",$info->getSaveName());
                $res['data']['title']=$info->getFilename();
            }else{
                // 上傳失敗獲取錯(cuò)誤信息
                $res['code']=1;
                $res['msg']='上傳失?。?#39;.$file->getError();
            }
            return $res;
        }
    }

以上就是layui多圖上傳實(shí)現(xiàn)刪除功能的方法的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注創(chuàng)新互聯(lián)其它相關(guān)文章！

網(wǎng)頁(yè)名稱(chēng)：layui多圖上傳時(shí)如何實(shí)現(xiàn)刪除功能？
新聞來(lái)源：http://muchs.cn/article22/iiogcc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計(jì)、域名注冊(cè)、微信小程序、網(wǎng)站內(nèi)鏈、定制網(wǎng)站、動(dòng)態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

成都做網(wǎng)站