織夢(mèng)圖集上傳flash控件更改為layui上傳模塊
隨著HTML5、CSS3等更先進(jìn)的技術(shù)日趨成熟，慢慢變得落后的Flash就像一個(gè)垂暮的老人，逐漸離開網(wǎng)民的視線，2012年，Adobe公司宣布將停止在安卓平臺(tái)上繼續(xù)更新Flash插件，轉(zhuǎn)為開發(fā)HTML5；2015年，Youtube宣布終止使用Flash作為默認(rèn)設(shè)置，而改用HTML5；同年，谷歌Chrome瀏覽器團(tuán)隊(duì)宣布，所有對(duì)于網(wǎng)頁內(nèi)容非至關(guān)重要的Flash動(dòng)畫廣告和內(nèi)容將禁止自動(dòng)播放。從2021年1月1日開始,Flash Player將不再獲得來自Adobe的支持?？棄?mèng)的圖集上傳功能使用的是flash控件，安全性也低，而且不能輕松實(shí)現(xiàn)多實(shí)例多圖集,所以我們就來把它換一換，換成現(xiàn)在比較流行的layui前端框架 - layui上傳模塊。
實(shí)現(xiàn)功能：
- 支持 gbk / utf8編碼織夢(mèng)程序
- 支持后臺(tái)、前臺(tái)、會(huì)員接入
- 支持所有模型接入
- 支持每個(gè)圖片刪除一并刪除圖片文件
- 支持每個(gè)圖片注釋
- 支持每個(gè)圖片排序
- 支持前臺(tái)超級(jí)簡單標(biāo)簽調(diào)用每個(gè)圖集
動(dòng)手前，我們得先下載織夢(mèng)圖集layui上傳模塊
下載后根據(jù)自己網(wǎng)站編碼把文件放到網(wǎng)站根目錄下的include文件夾即可。
實(shí)現(xiàn)方法：
1、打開 /dede/templets/album_add.htm 搜索
<div id="thumbnails"></div>在它所在的tr標(biāo)簽下面加入下面代碼：
<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"> <b>默認(rèn)圖集：</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>如下圖所示位置：
2、打開 /dede/templets/album_edit.htm 搜索
<div id="thumbnails"></div>在它所在的tr標(biāo)簽下面加入下面代碼
<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"> <b>默認(rèn)圖集：</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>如下圖所示位置：
3、打開 /dede/album_add.php 搜索
//加入附加表在它上面加入下面代碼
//圖集字段 imgurls
if(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}\r\n";
}
}
$imgurls .= addslashes($my_imgurls);4、打開 /dede/album_edit.php 找到
//更新附加表在它上面添加下面代碼
//圖集字段 imgurls
if(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}\r\n";
}
}
$imgurls .= addslashes($my_imgurls);內(nèi)容頁模板調(diào)用圖集標(biāo)簽新寫法
<h2>默認(rèn)圖集</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='圖片集字段'
不填的話就是調(diào)用圖集默認(rèn)
如果你嫌上面修改太麻煩，可下載修改好的。
織夢(mèng)多個(gè)圖集多實(shí)例教程
在操作下面的教程之前必須確定你已經(jīng)完成上面第一、第二、第三步
1、附加表里添加多個(gè)圖集字段，例如 戶型圖片 字段
后臺(tái)-系統(tǒng)-SQL工具-SQL命令行工具
ALTER TABLE dede_addonimages ADD `huxing` text;
注意：dede_addonimages?是默認(rèn)的圖集模型附加表，注意自己的附加表，千萬別寫錯(cuò)了。
2、打開 /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"> <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>添加的地方如下圖所示
繼續(xù)搜索
// 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(){
//失敗重傳
}
});如下圖所示位置
3、打開 /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"> <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">
<?php
if($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>如下圖所示位置
繼續(xù)搜索
// 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(){
//失敗重傳
}
});如下圖所示位置
4、打開 /dede/album_add.php 搜索
//生成HTML在它上面添加下面代碼
//新增圖集字段 huxing
if(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}\r\n";
}
if($huxing)
{
$huxing = addslashes($huxing);
$upquery = "UPDATE `$addtable` SET `huxing`='$huxing' WHERE aid='$arcID' ";
$dsql->ExecuteNoneQuery($upquery);
}
}如下圖所示位置
5、打開 /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}\r\n";
}
}
$huxing = addslashes($huxing);
$upquery = "UPDATE `$addtable` SET `huxing`='$huxing' WHERE aid='$id' ";
$dsql->ExecuteNoneQuery($upquery);如下圖所示位置
內(nèi)容頁調(diào)用標(biāo)簽參考上面的寫法。
使用layui第一張圖作為縮略圖
打開 /dede/album_add.php 搜索
生成文檔ID在它上面添加下面代碼
//使用layui第一張圖作為縮略圖
if($ddisfirst==1 && $litpic=='')
{
if(isset($_POST['imgurls']['url'][0]))
{
$litpic = $_POST['imgurls']['url'][0];
}
}如下圖所示位置
end
聲明：
1.本站主要是為了記錄工作、學(xué)習(xí)中遇到的問題，可能由于本人技術(shù)有限，內(nèi)容難免有紕漏，一切內(nèi)容僅供參考。
2.本站部分內(nèi)容來源互聯(lián)網(wǎng),如果有圖片或者內(nèi)容侵犯您的權(quán)益請(qǐng)聯(lián)系我們刪除！
3.本站所有原創(chuàng)作品，包括文字、資料、圖片、網(wǎng)頁格式，轉(zhuǎn)載時(shí)請(qǐng)標(biāo)注作者與來源。
1.本站主要是為了記錄工作、學(xué)習(xí)中遇到的問題，可能由于本人技術(shù)有限，內(nèi)容難免有紕漏，一切內(nèi)容僅供參考。
2.本站部分內(nèi)容來源互聯(lián)網(wǎng),如果有圖片或者內(nèi)容侵犯您的權(quán)益請(qǐng)聯(lián)系我們刪除！
3.本站所有原創(chuàng)作品，包括文字、資料、圖片、網(wǎng)頁格式，轉(zhuǎn)載時(shí)請(qǐng)標(biāo)注作者與來源。
THE END
