小李SEO博客

網站優化服務

dedecms后臺layui上傳圖集整合教程

flash已經停止更新,使用織夢的小伙伴們經常會出現織夢上傳圖集的按鈕不顯示,不顯示有電腦沒有安裝flash或者瀏覽器屏蔽了,如果想永久的避免這個問題,可以按照以下教程把flash換掉就可以。flash馬上要退出舞臺了,而織夢的圖集上傳功能更使用的就是flash控件,安全性也低,而且不能輕松實現多實例多圖集我們來把它換一換,換成現在比較流行的layui前端框架 - layui上傳模塊演示效果

整合功能。支持 gbk / utf8編碼織夢程序支持后臺、前臺、會員接入支持所有模型接入支持每個圖片刪除一并刪除圖片文件支持每個圖片注釋支持每個圖片排序支持前臺超級簡單標簽調用每個圖集。整合教程。第一步、下載額外所需文件,根據自己網站編碼把include里面的"layui"文件夾和"taglib"文件夾放到你網站include文件夾里去本地下載:織夢圖集layui上傳模塊.zip第二步、為后臺圖片集模型添加layui上傳模塊,官方原來的圖集上傳功能保留不動伸手黨可以直接下載這4個文件替換即可使用(替換之前建議你備份你自己的這4個文件)/dede/templets/album_add.htm/dede/templets/album_edit.htm/dede/album_add.php/dede/album_edit.php本地下載:織夢后臺圖片集模型添加layui上傳模塊4個文件覆蓋文件后刷新后臺即可使用,下面的教程可忽略掉?。?!

一下教程是開發步驟,適用于以上四個文件有過二開的。1、打開 /dede/templets/album_add.htm 找到<div id="thumbnails"></div>在它所在的tr標簽下面加入<link href="../include/layui/css/layui.css" rel="stylesheet" media="all"><script src="../include/layui/layui.js" type="text/javascript"></script><tr><td width="100%" height="24" colspan="4" class="bline"><table width="800" border="0" cellspacing="0" cellpadding="0"><tr><td width="80" height="40">&nbsp;<b>默認圖集:</b></td><td><button type="button" class="layui-btn layui-btn-sm layui-btn-normal imgurls"><i class="layui-icon layui-icon-upload"></i>上傳圖片</button></td></tr></table></td></tr><tr><td colspan="4" class="bline"><table width='100%'><tr><td><div class="layui-upload-img"><ul class="layui-upload-list" id="imgurls"></ul></div></td></tr></table></td></tr><script type="text/javascript"> layui.use('upload', function(){ var $ = layui.jquery ,upload = layui.upload; // imgurls 圖片上傳 var uploadInst = upload.render({ elem: '.imgurls' ,url: '../include/layui/layuiupload.php',multiple: true,accept: 'images' ,acceptMime: 'image/*' ,done: function(res){if(res.code == 0){return layer.msg(res.msg);}$('#imgurls').append('<li class="item_img"><div class="operate"><i class="toleft layui-icon layui-icon-left"></i><i class="toright layui-icon layui-icon-right"></i><i class="close layui-icon layui-icon-close-fill" data-id="' + res.id + '"></i></div><img src="' + res.img + '" class="img" ><input type="text" name="imgurls[alt][]" value="" class="layui-input" /><input type="hidden" name="imgurls[url][]" value="' + res.img + '" /><input type="hidden" name="imgurls[uaid][]" value="' + res.id + '" /></li>');} ,error: function(){ } });$("body").on("click",".close",function(){var id = $(this).data('id');$.get('../include/layui/layuiupload.php',{'dopost':'del','id':id},function(res){})$(this).closest("li").remove();});$("body").on("click",".layui-upload-img ul li .toleft",function(){var li_index = $(this).closest("li").index();if(li_index >= 1){$(this).closest("li").insertBefore($(this).closest("ul").find("li").eq(Number(li_index)-1));}});$("body").on("click",".layui-upload-img ul li .toright",function(){var li_index = $(this).closest("li").index();$(this).closest("li").insertAfter($(this).closest("ul").find("li").eq(Number(li_index)+1));}); });</script>如圖

打開 /dede/templets/album_edit.htm 找到<div id="thumbnails"></div>在它所在的tr標簽下面加入<link href="../include/layui/css/layui.css" rel="stylesheet" media="all"><script src="../include/layui/layui.js" type="text/javascript"></script><tr><td width="100%" height="24" colspan="4" class="bline"><table width="800" border="0" cellspacing="0" cellpadding="0"><tr><td width="80" height="40">&nbsp;<b>默認圖集:</b></td><td><button type="button" class="layui-btn layui-btn-sm layui-btn-normal imgurls"><i class="layui-icon layui-icon-upload"></i>上傳圖片</button></td></tr></table></td></tr><tr><td colspan="4" class="bline"><table width='100%'><tr><td><div class="layui-upload-img"><ul class="layui-upload-list" id="imgurls"></ul></div></td></tr></table></td></tr><script type="text/javascript"> layui.use('upload', function(){ var $ = layui.jquery ,upload = layui.upload; // imgurls 圖片上傳 var uploadInst = upload.render({ elem: '.imgurls' ,url: '../include/layui/layuiupload.php',multiple: true,accept: 'images' ,acceptMime: 'image/*' ,done: function(res){if(res.code == 0){return layer.msg(res.msg);}$('#imgurls').append('<li class="item_img"><div class="operate"><i class="toleft layui-icon layui-icon-left"></i><i class="toright layui-icon layui-icon-right"></i><i class="close layui-icon layui-icon-close-fill" data-id="' + res.id + '"></i></div><img src="' + res.img + '" class="img" ><input type="text" name="imgurls[alt][]" value="" class="layui-input" /><input type="hidden" name="imgurls[url][]" value="' + res.img + '" /><input type="hidden" name="imgurls[uaid][]" value="' + res.id + '" /></li>');} ,error: function(){ //失敗重傳 } });$("body").on("click",".close",function(){var id = $(this).data('id');$.get('../include/layui/layuiupload.php',{'dopost':'del','id':id},function(res){})$(this).closest("li").remove();});$("body").on("click",".layui-upload-img ul li .toleft",function(){var li_index = $(this).closest("li").index();if(li_index >= 1){$(this).closest("li").insertBefore($(this).closest("ul").find("li").eq(Number(li_index)-1));}});$("body").on("click",".layui-upload-img ul li .toright",function(){var li_index = $(this).closest("li").index();$(this).closest("li").insertAfter($(this).closest("ul").find("li").eq(Number(li_index)+1));}); });</script>如圖

打開 /dede/album_add.php 找到//加入附加表在它上面加入//圖集字段 imgurlsif(is_array($_POST['imgurls']['url'])){$my_imgurls = "";foreach($_POST['imgurls']['url'] as $key => $val){$my_imgurls .= "{dede:img ddimg='$val' text='{$_POST['imgurls']['alt'][$key]}' width='' height='' uaid='{$_POST['imgurls']['uaid'][$key]}'}$val{/dede:img}";}}$imgurls .= addslashes($my_imgurls);

打開 /dede/album_edit.php 找到//更新附加表在它上面加入//圖集字段 imgurlsif(is_array($_POST['imgurls']['url'])){$my_imgurls = "";foreach($_POST['imgurls']['url'] as $key => $val){$my_imgurls .= "{dede:img ddimg='$val' text='{$_POST['imgurls']['alt'][$key]}' width='' height='' uaid='{$_POST['imgurls']['uaid'][$key]}'}$val{/dede:img}";}}$imgurls .= addslashes($my_imgurls);

內容頁模板調用圖集標簽新寫法。<h2>默認圖集</h2><ul>{dede:imagelist}<li><img src="[field:imgsrc/]" alt="[field:text/]" width="220" height="150"><p>[field:text/]</p></li>{/dede:imagelist}</ul><h2>戶型圖片</h2><ul>{dede:imagelist field="huxing"}<li><img src="[field:imgsrc/]" alt="[field:text/]" width="220" height="150"><p>[field:text/]</p></li>{/dede:imagelist}</ul>特別說明{dede:imagelist field="huxing"}field='圖片集字段'不填的話就是調用圖集默認

織夢多個圖集多實例教程。在操作下面的教程之前必須確定你已經完成上面第一、第二、第三步第一步、附加表里添加多個圖集字段,例如 戶型圖片 字段后臺-系統-SQL工具-SQL命令行工具ALTER TABLE dede_addonimages ADD `huxing` text;

dede_addonimages是我的圖集模型附加表,注意自己的附加表,千萬別寫錯了

打開 /dede/templets/album_add.htm 找到id="imgurls"在它所在的tr下面加入<tr><td width="100%" height="24" colspan="4" class="bline"><table width="800" border="0" cellspacing="0" cellpadding="0"><tr><td width="80" height="40">&nbsp;<b>戶型圖片:</b></td><td><button type="button" class="layui-btn layui-btn-sm layui-btn-normal huxing"><i class="layui-icon layui-icon-upload"></i>上傳圖片</button></td></tr></table></td></tr><tr><td colspan="4" class="bline"><table width='100%'><tr><td><div class="layui-upload-img"><ul class="layui-upload-list" id="huxing"></ul></div></td></tr></table></td></tr>如圖,注意標注的地方

繼續找到// imgurls 圖片上傳在它上面加入// huxing 圖片上傳var uploadInst = upload.render({elem: '.huxing',url: '../include/layui/layuiupload.php',multiple: true,accept: 'images',acceptMime: 'image/*',done: function(res){if(res.code == 0){return layer.msg(res.msg);}$('#huxing').append('<li class="item_img"><div class="operate"><i class="toleft layui-icon layui-icon-left"></i><i class="toright layui-icon layui-icon-right"></i><i class="close layui-icon layui-icon-close-fill" data-id="' + res.id + '"></i></div><img src="' + res.img + '" class="img" ><input type="text" name="huxing[alt][]" value="" class="layui-input" /><input type="hidden" name="huxing[url][]" value="' + res.img + '" /><input type="hidden" name="huxing[uaid][]" value="' + res.id + '" /></li>');},error: function(){//失敗重傳}});如圖,注意標注的地方

打開 /dede/templets/album_edit.htm 找到id="imgurls"在它所在的tr下面加入<tr><td width="100%" height="24" colspan="4" class="bline"><table width="800" border="0" cellspacing="0" cellpadding="0"><tr><td width="80" height="40">&nbsp;<b>戶型圖片:</b></td><td><button type="button" class="layui-btn layui-btn-sm layui-btn-normal huxing"><i class="layui-icon layui-icon-upload"></i>上傳圖片</button></td></tr></table></td></tr><tr><td colspan="4" class="bline"><table width='100%'><tr><td><div class="layui-upload-img"><ul class="layui-upload-list" id="huxing"><?phpif($addRow['huxing']!=""){$dtp = new DedeTagParse();$dtp->LoadSource($addRow['huxing']);if(is_array($dtp->CTags)){$fhtml = '';foreach($dtp->CTags as $ctag){if($ctag->GetName()=="img"){$bigimg = trim($ctag->GetInnerText());$text = trim($ctag->GetAtt('text'),'‘');$uaid = trim($ctag->GetAtt('uaid'),'‘');$fhtml .= "<li class="item_img"><div class="operate"><i class="toleft layui-icon layui-icon-left"></i><i class="toright layui-icon layui-icon-right"></i><i class="close layui-icon layui-icon-close-fill" data-id="{$uaid}"></i></div><img src="{$bigimg}" class="img" ><input type="text" name="huxing[alt][]" value="{$text}" class="layui-input" /><input type="hidden" name="huxing[url][]" value="{$bigimg}" /><input type="hidden" name="huxing[uaid][]" value="{$uaid}" /></li>";}}echo $fhtml;}$dtp->Clear();}?></ul></div></td></tr></table></td></tr>如圖,注意標注的字段部分

繼續找到// imgurls 圖片上傳在它上面加入// huxing 圖片上傳var uploadInst = upload.render({elem: '.huxing',url: '../include/layui/layuiupload.php',multiple: true,accept: 'images',acceptMime: 'image/*',done: function(res){if(res.code == 0){return layer.msg(res.msg);}$('#huxing').append('<li class="item_img"><div class="operate"><i class="toleft layui-icon layui-icon-left"></i><i class="toright layui-icon layui-icon-right"></i><i class="close layui-icon layui-icon-close-fill" data-id="' + res.id + '"></i></div><img src="' + res.img + '" class="img" ><input type="text" name="huxing[alt][]" value="" class="layui-input" /><input type="hidden" name="huxing[url][]" value="' + res.img + '" /><input type="hidden" name="huxing[uaid][]" value="' + res.id + '" /></li>');},error: function(){//失敗重傳}});如圖,注意標注的字段

打開 /dede/album_add.php 找到//生成HTML在它上面加入//新增圖集字段 huxingif(is_array($_POST['huxing']['url'])){$huxing = "";foreach($_POST['huxing']['url'] as $key => $val){$huxing .= "{dede:img ddimg='$val' text='{$_POST['huxing']['alt'][$key]}' width='' height='' uaid='{$_POST['huxing']['uaid'][$key]}'}$val{/dede:img}";}if($huxing){$huxing = addslashes($huxing);$upquery = "UPDATE `$addtable` SET `huxing`='$huxing' WHERE aid='$arcID' ";$dsql->ExecuteNoneQuery($upquery);}}如圖,注意標注的字段

打開 /dede/album_edit.php 找到//生成HTML在它上面加入//新增圖集字段 huxing$huxing = "";if(is_array($_POST['huxing']['url'])){foreach($_POST['huxing']['url'] as $key => $val){$huxing .= "{dede:img ddimg='$val' text='{$_POST['huxing']['alt'][$key]}' width='' height='' uaid='{$_POST['huxing']['uaid'][$key]}'}$val{/dede:img}";}}$huxing = addslashes($huxing);$upquery = "UPDATE `$addtable` SET `huxing`='$huxing' WHERE aid='$id' ";$dsql->ExecuteNoneQuery($upquery);如圖,注意標注的字段

內容頁標簽新寫法參考上面使用layui第一張圖作為縮略圖打開 /dede/album_add.php 找到生成文檔ID在它上面加入//使用layui第一張圖作為縮略圖if($ddisfirst==1 && $litpic==''){if(isset($_POST['imgurls']['url'][0])){$litpic = $_POST['imgurls']['url'][0];}}如圖

上一篇:織夢cms把數據保存到數據庫附加表出錯 下一篇:織夢cms網站安全性設置方法
織夢cms相關文章閱讀
  • 織夢cms文本字段限制字數方法

    小李網絡公司介紹織夢cms文本字段限制字數方法知識,包括織夢DedeCMS自定義多行文本字段限制字數的方法詳解_網站技...如何解決織夢DedeCms文章標題字數長度限制的方法教程 - 趙......

  • 織夢cms5.3圖片大小自適應問題解決方法

    小李網絡公司介紹織夢cms5.3圖片大小自適應問題知識,包括img標簽圖片大小自適應html圖片大小自適應 設置怎么讓圖片自適應div大小img圖片寬度自適應圖片大小編輯html 圖片自適應大小ppt圖片大小...

  • 織夢cms文章頁用鍵盤左右鍵實現上下篇翻頁功能

    小李網絡公司介紹織夢cms文章頁用鍵盤左右鍵實現上下篇翻頁功能知識,包括織夢文章頁上下篇實現利用鍵盤左右翻頁_織夢58,鍵盤上下左右鍵被鎖定帝國cms和織夢哪個好電腦鍵盤上下左右鍵失靈...

  • 織夢cms匿名發布文章修改方法

    小李網絡公司介紹織夢cms匿名發布文章修改方法知識,包括公眾號文章第二次修改技巧微信文章修改后多久生效公眾號文章修改后沒變已經發表的公眾號怎么修改已發布微信文章改圖片微信公眾...

  • 織夢cms廣告延遲加載顯示設置教程

    小李網絡公司介紹織夢cms廣告延遲加載顯示設置教程知識,包括如何刪除織夢廣告延遲加載和立即加載實體來添加延遲加載dedecms清空廣告angular延遲加載dede廣告圖片鏈接dede廣告插件dede如何刷新廣...

  • 織夢cms安裝后數據表前綴修改方法

    小李網絡公司介紹織夢cms安裝后數據表前綴修改知識,包括修改DedeCMS系統數據庫表前綴的方法_織夢58,數據庫表前綴填寫數據表前綴是啥圖片如何批量修改前綴數據庫表前綴是什么excel前綴一樣怎...

  • 織夢cms后臺增加php導出到excel功能不出現亂碼

    小李網絡公司介紹織夢cms后臺增加php導出功能不出現亂碼知識,包括dede織夢后臺增加導出內容到excel功能方法 不會亂碼_織夢58,帝國cms和織夢哪個好織夢dede建站教程視頻dede仿站網dede標記教程de...

  • 織夢cms本地上傳圖片縮略圖加水印方法

    小李網絡公司介紹織夢cms本地上傳圖片縮略圖加水印方法知識,包括上傳圖片顯示缺少源文件地址dedecms上傳縮略圖dedecms圖片縮略圖織夢上傳織夢https圖片格式織夢https之后上傳不了圖片織夢會員...

  • 織夢cms給第一個li加class教程

    小李網絡公司介紹織夢cms給第一個li加class教程知識,包括dedecms怎么給第一個li加class-織夢安裝使用-跟版網,li標簽的class屬性ul classdiv的class是什么意思button的class屬性css中class的用法htmlliclassclass的...

  • 織夢cms評論總數標簽代碼調用方法

    小李網絡公司介紹織夢cms評論總數標簽代碼調用方法知識,包括dedecms如何利用標簽調用當前文章評論數量的方法_織夢58,dede單頁面調用dede年標簽調用dede首頁調用圖文dede輪播調用dede標簽調用詳情...

  • 織夢cms分頁列表一直豎著解決方法

    小李網絡公司介紹織夢cms分頁列表一直豎著解決方法知識,包括織夢列表分頁織夢分頁樣式修改織夢分頁樣式cms怎么做分頁dedecms分頁怎么做織夢cms分頁dedeajax分頁dede分頁css樣式....

  • 織夢cms文章內容頁面分頁顯示數量控制教程

    小李網絡公司介紹織夢cms文章內容頁面分頁顯示數量控制教程知識,包括dededede什么意思word怎么分頁顯示dede怎么仿站分頁顯示分頁顯示jspifconfig分頁顯示如何讓表格分頁顯示Xshell分頁顯示如何分...

SEO公司排名
在线视频国产网站你懂得},97se亚洲国产综合自在线观看,婷婷五月色综合香五月a,欧洲自拍视频另类中文字幕
?
QQ在線咨詢
SEM競價推廣
137-1296-7640
SEO優化外包
137-1296-7640