无码国精品一区二区免费蜜桃,91av亚洲,久久美女精品

主頁(yè) > 網(wǎng)站建設(shè) > 建站知識(shí) > 織夢(mèng)圖集整合layui上傳可多圖集多實(shí)例可會(huì)員多圖集

織夢(mèng)圖集整合layui上傳可多圖集多實(shí)例可會(huì)員多圖集

POST TIME:2021-05-22 23:52

html5響應(yīng)式網(wǎng)站織夢(mèng)模板源碼IT網(wǎng)絡(luò)工作室織夢(mèng)網(wǎng)

工業(yè)環(huán)保工程類企業(yè)網(wǎng)站織夢(mèng)模板(帶手機(jī)端)

藍(lán)色安防器材公司類整站模板

軟件APP類網(wǎng)站源碼織夢(mèng)通用型企業(yè)網(wǎng)站源碼html

(此圖片來源于網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系刪除! )

flash已經(jīng)停止更新，使用織夢(mèng)的小伙伴們經(jīng)常會(huì)出現(xiàn)織夢(mèng)上傳圖集的按鈕不顯示，不顯示有電腦沒有安裝flash或者瀏覽器屏蔽了，如果想永久的避免這個(gè)問題，可以按照以下教程把flash換掉就可以。

flash馬上要退出舞臺(tái)了，而織夢(mèng)的圖集上傳功能更使用的就是flash控件，安全性也低，而且不能輕松實(shí)現(xiàn)多實(shí)例多圖集

我們來把它換一換，換成現(xiàn)在比較流行的layui前端框架 - layui上傳模塊

演示效果

整合功能

支持 gbk / utf8編碼織夢(mèng)程序
支持后臺(tái)、前臺(tái)、會(huì)員接入
支持所有模型接入
支持每個(gè)圖片刪除一并刪除圖片文件
支持每個(gè)圖片注釋
支持每個(gè)圖片排序
支持前臺(tái)超級(jí)簡(jiǎn)單標(biāo)簽調(diào)用每個(gè)圖集

整合教程

第一步、下載額外所需文件，根據(jù)自己網(wǎng)站編碼

把include里面的"layui"文件夾和"taglib"文件夾放到你網(wǎng)站include文件夾里去

本地下載：織夢(mèng)圖集layui上傳模塊.zip

第二步、為后臺(tái)圖片集模型添加layui上傳模塊，官方原來的圖集上傳功能保留不動(dòng)

伸手黨可以直接下載這4個(gè)文件替換即可使用(替換之前建議你備份你自己的這4個(gè)文件)

/dede/templets/album_add.htm
/dede/templets/album_edit.htm
/dede/album_add.php
/dede/album_edit.php

本地下載：織夢(mèng)后臺(tái)圖片集模型添加layui上傳模塊4個(gè)文件

覆蓋文件后刷新后臺(tái)即可使用，下面的教程可忽略掉！??！

一下教程是開發(fā)步驟，適用于以上四個(gè)文件有過二開的。

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">&nbsp;<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>

如圖

(此圖片來源于網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系刪除! )

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">&nbsp;<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>

如圖

(此圖片來源于網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系刪除! )

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}
";
	}
}
$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}
";
	}
}
$imgurls .= addslashes($my_imgurls);

第三步、內(nèi)容頁(yè)模板調(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)完成上面第一、第二、第三步

第一步、附加表里添加多個(gè)圖集字段，例如戶型圖片字段

后臺(tái)-系統(tǒng)-SQL工具-SQL命令行工具

ALTER TABLE dede_addonimages ADD `huxing` text;

(此圖片來源于網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系刪除! )

dede_addonimages 是我的圖集模型附加表，注意自己的附加表，千萬(wàn)別寫錯(cuò)了

(此圖片來源于網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系刪除! )

第二步、打開 /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>

如圖，注意標(biāo)注的地方

(此圖片來源于網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系刪除! )

繼續(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(){
		//失敗重傳
		
	}
});

如圖，注意標(biāo)注的地方

(此圖片來源于網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系刪除! )

第三步、打開 /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">
							<?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>

如圖，注意標(biāo)注的字段部分

(此圖片來源于網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系刪除! )

繼續(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(){
		//失敗重傳
		
	}
});

如圖，注意標(biāo)注的字段

(此圖片來源于網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系刪除! )

第四步、打開 /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}
";
	}
	if($huxing)
	{
		$huxing = addslashes($huxing);
		$upquery = "UPDATE `$addtable` SET `huxing`='$huxing' WHERE aid='$arcID' ";
		$dsql->ExecuteNoneQuery($upquery);
	}
}

如圖，注意標(biāo)注的字段

(此圖片來源于網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系刪除! )

第五步、打開 /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);

如圖，注意標(biāo)注的字段

(此圖片來源于網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系刪除! )

第六步、內(nèi)容頁(yè)標(biāo)簽新寫法參考上面

使用layui第一張圖作為縮略圖

打開 /dede/album_add.php 找到

生成文檔ID

在它上面加入

//使用layui第一張圖作為縮略圖
if($ddisfirst==1 && $litpic=='')
{
	if(isset($_POST['imgurls']['url'][0]))
	{
		$litpic = $_POST['imgurls']['url'][0];
	}
}

如圖

(此圖片來源于網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系刪除! )

網(wǎng)站建設(shè)短信群發(fā)企業(yè)彩鈴網(wǎng)站SEO 電話機(jī)器人 400電話

北京短信群發(fā) 浙江短信群發(fā) 天津短信群發(fā) 安徽短信群發(fā) 上海短信群發(fā) 福建短信群發(fā) 重慶短信群發(fā) 江西短信群發(fā) 香港短信群發(fā) 山東短信群發(fā) 澳門短信群發(fā) 河南短信群發(fā) 內(nèi)蒙古短信群發(fā) 湖北短信群發(fā) 新疆短信群發(fā) 湖南短信群發(fā) 寧夏短信群發(fā) 廣東短信群發(fā) 西藏短信群發(fā) 海南短信群發(fā) 廣西短信群發(fā) 四川短信群發(fā) 河北短信群發(fā) 貴州短信群發(fā) 山西短信群發(fā) 云南短信群發(fā) 遼寧短信群發(fā) 陜西短信群發(fā) 吉林短信群發(fā) 甘肅短信群發(fā) 黑龍江短信群發(fā) 青海短信群發(fā) 江蘇短信群發(fā) 臺(tái)灣短信群發(fā)

北京企業(yè)彩鈴浙江企業(yè)彩鈴天津企業(yè)彩鈴安徽企業(yè)彩鈴上海企業(yè)彩鈴福建企業(yè)彩鈴重慶企業(yè)彩鈴江西企業(yè)彩鈴香港企業(yè)彩鈴山東企業(yè)彩鈴澳門企業(yè)彩鈴河南企業(yè)彩鈴內(nèi)蒙古企業(yè)彩鈴湖北企業(yè)彩鈴新疆企業(yè)彩鈴湖南企業(yè)彩鈴寧夏企業(yè)彩鈴廣東企業(yè)彩鈴西藏企業(yè)彩鈴海南企業(yè)彩鈴廣西企業(yè)彩鈴四川企業(yè)彩鈴河北企業(yè)彩鈴貴州企業(yè)彩鈴山西企業(yè)彩鈴云南企業(yè)彩鈴遼寧企業(yè)彩鈴陜西企業(yè)彩鈴吉林企業(yè)彩鈴甘肅企業(yè)彩鈴黑龍江企業(yè)彩鈴青海企業(yè)彩鈴江蘇企業(yè)彩鈴臺(tái)灣企業(yè)彩鈴

北京網(wǎng)站SEO 西藏網(wǎng)站SEO 海南網(wǎng)站SEO 廣西網(wǎng)站SEO 四川網(wǎng)站SEO 河北網(wǎng)站SEO 貴州網(wǎng)站SEO 山西網(wǎng)站SEO 云南網(wǎng)站SEO 遼寧網(wǎng)站SEO 陜西網(wǎng)站SEO 吉林網(wǎng)站SEO 甘肅網(wǎng)站SEO 黑龍江網(wǎng)站SEO 青海網(wǎng)站SEO 江蘇網(wǎng)站SEO 廣東網(wǎng)站SEO 寧夏網(wǎng)站SEO 上海網(wǎng)站SEO 浙江網(wǎng)站SEO 天津網(wǎng)站SEO 安徽網(wǎng)站SEO 福建網(wǎng)站SEO 重慶網(wǎng)站SEO 江西網(wǎng)站SEO 香港網(wǎng)站SEO 山東網(wǎng)站SEO 澳門網(wǎng)站SEO 河南網(wǎng)站SEO 內(nèi)蒙古網(wǎng)站SEO 湖北網(wǎng)站SEO 新疆網(wǎng)站SEO 湖南網(wǎng)站SEO 臺(tái)灣網(wǎng)站SEO

使用QQ郵件列表做郵箱訂閱系統(tǒng)

DEDEcms官方更新手機(jī)站和PC站實(shí)現(xiàn)同步遇到的二級(jí)

DedeCMS系統(tǒng)未審核的文檔禁止動(dòng)態(tài)瀏覽

下拉菜單式的友情鏈接

織夢(mèng)響應(yīng)式后臺(tái)模板輔助插件不顯示新模塊和插件的解決方法

dedecms后臺(tái)登錄成功后,又返回登錄界面已成功解決！

織夢(mèng)DedeCMS移動(dòng)端手機(jī)端站點(diǎn)安裝搭建使用教程

dedecms中如何調(diào)用下級(jí)欄目并判斷是否有下級(jí)欄目

織夢(mèng)DedeCMS全站評(píng)論總數(shù)調(diào)用方法

推薦模板下載更多>>

響應(yīng)式工業(yè)重工網(wǎng)站源碼機(jī)械類網(wǎng)站織夢(mèng)模板

藍(lán)色物業(yè)類企業(yè)公司網(wǎng)站織夢(mèng)模板

織夢(mèng)標(biāo)識(shí)公司類紅色大氣營(yíng)銷模板

上一篇：織夢(mèng)dedecms文章內(nèi)容中怎么替換多個(gè)敏感字詞

下一篇：dedecms注冊(cè)登錄功能怎么做

一起分享吧

織夢(mèng)圖集整合layui上傳可多圖集多實(shí)例可會(huì)員多圖集

演示效果

整合功能

整合教程

織夢(mèng)多個(gè)圖集多實(shí)例教程

使用layui第一張圖作為縮略圖

QQ咨詢

電話咨詢