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

成都創(chuàng)新互聯(lián)公司是一家專業(yè)提供察布查爾錫伯企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站建設(shè)、成都做網(wǎng)站、HTML5、小程序制作等業(yè)務(wù)。10年已為察布查爾錫伯眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)絡(luò)公司優(yōu)惠進(jìn)行中。

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

下面附上代碼

HTML:

    多圖片上傳
    

        預(yù)覽圖：
        

                                    
        
    

CSS:

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(
                    '
' +
                    '
' +
                    '' +
                    '
' + res.data.title + '
' +
                    '
'
                );
            }
        });

$(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']='上傳失??！'.$file->getError();
            }
            return $res;
        }
    }

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

網(wǎng)站標(biāo)題：layui多圖上傳時(shí)如何實(shí)現(xiàn)刪除功能？-創(chuàng)新互聯(lián)
文章分享：http://weahome.cn/article/ccesde.html