在使用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ū)合作)期待與您的合作!
在網(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)其它相關(guān)文章!