一共3个文件:
- 显示及上传文件:site/links/img_one.html
- 保存图片文件:site/links/img_one_up1.chtml
- 导航菜单文件:site/links/menu.html
在轻开电子商务系统(企业入门级B2C网站)的site/links/目录下
显示图片信息且上传表单:site/links/img_one.html显示标题(从menu.html文件传过来的标题)
<tr><th colspan=2>.<font class=listTitle>@{pPage:title}</font>.</th></tr>
显示图片(从menu.html文件传过来的图片名)
<tr><td colspan=2 align=center><img src="@{sys:path}@{pPage:src}" border=1 id=_img /></td></tr>
选择图片的input
<tr><td><font class=actTitle>新 图 片</font></td><td><INPUT name=IMAGE size=32 type=file><a id=_iwh>(283px × 51px)</a></td></tr>
计算图片宽高的js函数
imgWidthHeight = function ()
{
var _img = document.getElementById("_img");
var _iwh = document.getElementById("_iwh");
_iwh.innerHTML = "("+_img.offsetWidth+"px × "+_img.offsetHeight+"px)";
}
提交新图片的表单(提交到site/links/img_one_up1.chtml)
<form id=save action="@{sys:face}site/links/img_one_up1.chtml" οnsubmit="return false;" target=_self method=post enctype="multipart/form-data">
... ...
</form>
需要提交到保存页面的其他字段
<input type=hidden name=reUrl value="site/links/img_one.html">
<input type=hidden name=src value="@{pPage:src}">
<input type=hidden name=title value="@{pPage:title}">
保存操作
<chtml>
<if x="@{sys:canDo}">
<div align=right x=true><a href="javascript:doSubmit()" title="保存新图片!">[保存]</a> </div>
</if>
</chtml>
校验提交的js函数
var save = document.forms['save'];
doSubmit = function ()
{
var str = save['IMAGE'].value.toLowerCase();
if(str!="")
{
var pos = str.lastIndexOf(".");
if(pos==-1){alert("请选择正确的图片文件");return;}
str = str.substring(pos);
var ImgSrc = "@{pPage:src}".toLowerCase();
pos = ImgSrc.lastIndexOf(".");
if(pos==-1){alert("无法替换错误的图片文件");return;}
var ImgExt = ImgSrc.substring(pos);
if(str!=ImgExt)
{alert("只能用 "+ImgExt+" 图片");return;}
}
else{
alert("必需上传图片!");
return;
}
save.submit();
}
效果
全部代码
<html>
<title>换静态图片</title>
<link href="@{sys:path}base/css/system.css" rel="stylesheet" type="text/css">
<BODY leftMargin="0" topMargin="0" scroll="no" MARGINWIDTH="0" MARGINHEIGHT="0" οnlοad="imgWidthHeight()">
<LINK href="@{sys:path}base/css/main.css" type="TEXT/CSS" rel="STYLESHEET">
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TR vAlign=top>
<TD style="BACKGROUND-REPEAT: repeat-x" background="@{sys:path}images/Title2.gif">
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TR vAlign=top>
<TD height=32 style="BACKGROUND-REPEAT: no-repeat" noWrap width="100%" class="GAP1">
<P style="MARGIN-LEFT: 2px; MARGIN-RIGHT: 3px"><IMG height=9 src="@{sys:path}images/k7.gif" width=9 align=absMiddle> 换静态图片</P></TD></TR></TABLE>
</TD>
<TD width=10 class="GAP1"><IMG height=21 src="@{sys:path}images/Title3.gif" width=16></TD>
<chtml><Bag id=sys><we name=NodeID>a0</we></Bag><!-- 栏目节点 --></chtml>
<chtml file="base/ac/checkAcl.htm"/><!-- 引入权限检查文件 -->
<TD style="BACKGROUND-REPEAT: repeat-x" vAlign=bottom width="100%" background="@{sys:path}images/Title4.gif">
<chtml>
<if x="@{sys:canDo}">
<div align=right x=true><a href="javascript:doSubmit()" title="保存新图片!">[保存]</a> </div>
</if>
</chtml>
</TD>
</TR>
</TABLE>
<table width=99% align=center border=1 cellpadding="3" cellspacing="0" style="border-collapse:collapse;font-size:12px">
<tr><th colspan=2>.<font class=listTitle>@{pPage:title}</font>.</th></tr>
<form id=save action="@{sys:face}site/links/img_one_up1.chtml" οnsubmit="return false;" target=_self method=post enctype="multipart/form-data">
<input type=hidden name=reUrl value="site/links/img_one.html">
<input type=hidden name=src value="@{pPage:src}">
<input type=hidden name=title value="@{pPage:title}">
<tr><td colspan=2 align=center><img src="@{sys:path}@{pPage:src}" border=1 id=_img /></td></tr>
<tr><td><font class=actTitle>新 图 片</font></td><td><INPUT name=IMAGE size=32 type=file><a id=_iwh>(283px × 51px)</a></td></tr>
</form>
</table>
</BODY>
</html>
<script>
var save = document.forms['save'];
doSubmit = function ()
{
var str = save['IMAGE'].value.toLowerCase();
if(str!="")
{
var pos = str.lastIndexOf(".");
if(pos==-1){alert("请选择正确的图片文件");return;}
str = str.substring(pos);
var ImgSrc = "@{pPage:src}".toLowerCase();
pos = ImgSrc.lastIndexOf(".");
if(pos==-1){alert("无法替换错误的图片文件");return;}
var ImgExt = ImgSrc.substring(pos);
if(str!=ImgExt)
{alert("只能用 "+ImgExt+" 图片");return;}
}
else{
alert("必需上传图片!");
return;
}
save.submit();
}
imgWidthHeight = function ()
{
var _img = document.getElementById("_img");
var _iwh = document.getElementById("_iwh");
_iwh.innerHTML = "("+_img.offsetWidth+"px × "+_img.offsetHeight+"px)";
}
</script>
保存图片的文件(site/links/img_one_up1.chtml)
保存新上传的图片(一行代码搞掂)
<file value="@{pPage:IMAGE}" islast>@{pPage:src}</file>
全部代码
<html>
<!-- 栏目节点 -->
<chtml><Bag id=sys><we name=NodeID>a0.0</we></Bag></chtml>
<chtml file="base/ac/checkAcl.htm"/><!-- 引入权限检查文件 -->
<chtml>
<if x="@{sys:canDo}" else=1>
<we x=true>
<file value="@{pPage:IMAGE}" islast>@{pPage:src}</file>
<script>
alert("修改成功!");location.href='@{sys:face}@{pPage:reUrl}?src=@{pPage:src}&title='+encodeURIComponent("@{pPage:title}");
</script>
</we>
<script>
alert("您没有权限!");
location.href='@{sys:face}@{pPage:reUrl}?src=@{pPage:src}&title='+encodeURIComponent("@{pPage:title}");
</script>
</if>
</chtml>
</html>
导航菜单文件(site/links/menu.html)导航项目的js数组
var urls = new Array();
urls[0] = new Array();
...
urls[1] = new Array();
urls[1][0]="img_logo.html";
urls[1][1]="img_one.html?src=images/tmp/KEteltu1.jpg&title="+encodeURIComponent("400电话图");
urls[1][2]="img_one.html?src=images/menu/hot.jpg&title="+encodeURIComponent("热卖推荐");
urls[1][3]="img_one.html?src=images/menu/yushiyongpin.jpg&title="+encodeURIComponent("主页第2张导航小图");
urls[1][4]="img_one.html?src=images/menu/chuangpin.jpg&title="+encodeURIComponent("主页第3张导航小图");
urls[1][5]="img_one.html?src=images/menu/chuangpintaozhuang.jpg&title="+encodeURIComponent("主页第4张导航小图");
urls[1][6]="img_one.html?src=images/menu/ertongfang.jpg&title="+encodeURIComponent("主页第5张导航小图");
urls[1][7]="img_one.html?src=images/menu/beixin.jpg&title="+encodeURIComponent("主页第6张导航小图");
urls[1][8]="img_one.html?src=images/menu/zhenxin.jpg&title="+encodeURIComponent("主页第7张导航小图");
urls[1][9]="img_one.html?src=images/foot.jpg&title="+encodeURIComponent("页脚导航图");
显示菜单
<TR vAlign="top">
<TD>
<TABLE cellSpacing="0" cellPadding="0" width="90%" align="center" border="0" id="sub1" style="display:none">
<TR vAlign="middle" height="20">
<TD width="9%"><IMG src="@{sys:path}images/k7.gif"></TD>
<TD width="91%"> <A href="javascript:void(0)" onClick="openUrl(1,0)"><NOBR>Logo</NOBR></A></TD>
</TR>
<TR vAlign="middle" height="20">
<TD width="9%"><IMG src="@{sys:path}images/k7.gif"></TD>
<TD width="91%"> <A href="javascript:void(0)" onClick="openUrl(1,1)"><NOBR>400电话图</NOBR></A></TD>
</TR>
<TR vAlign="middle" height="20">
<TD width="9%"><IMG src="@{sys:path}images/k7.gif"></TD>
<TD width="91%"> <A href="javascript:void(0)" onClick="openUrl(1,2)"><NOBR>热卖推荐</NOBR></A></TD>
</TR>
<TR vAlign="middle" height="20">
<TD width="9%"><IMG src="@{sys:path}images/k7.gif"></TD>
<TD width="91%"> <A href="javascript:void(0)" onClick="openUrl(1,3)"><NOBR>主页第2张导航小图</NOBR></A></TD>
</TR>
<TR vAlign="middle" height="20">
<TD width="9%"><IMG src="@{sys:path}images/k7.gif"></TD>
<TD width="91%"> <A href="javascript:void(0)" onClick="openUrl(1,4)"><NOBR>主页第3张导航小图</NOBR></A></TD>
</TR>
<TR vAlign="middle" height="20">
<TD width="9%"><IMG src="@{sys:path}images/k7.gif"></TD>
<TD width="91%"> <A href="javascript:void(0)" onClick="openUrl(1,5)"><NOBR>主页第4张导航小图</NOBR></A></TD>
</TR>
<TR vAlign="middle" height="20">
<TD width="9%"><IMG src="@{sys:path}images/k7.gif"></TD>
<TD width="91%"> <A href="javascript:void(0)" onClick="openUrl(1,6)"><NOBR>主页第5张导航小图</NOBR></A></TD>
</TR>
<TR vAlign="middle" height="20">
<TD width="9%"><IMG src="@{sys:path}images/k7.gif"></TD>
<TD width="91%"> <A href="javascript:void(0)" onClick="openUrl(1,7)"><NOBR>主页第6张导航小图</NOBR></A></TD>
</TR>
<TR vAlign="middle" height="20">
<TD width="9%"><IMG src="@{sys:path}images/k7.gif"></TD>
<TD width="91%"> <A href="javascript:void(0)" onClick="openUrl(1,8)"><NOBR>主页第7张导航小图</NOBR></A></TD>
</TR>
<TR vAlign="middle" height="20">
<TD width="9%"><IMG src="@{sys:path}images/k7.gif"></TD>
<TD width="91%"> <A href="javascript:void(0)" onClick="openUrl(1,9)"><NOBR>页脚导航图</NOBR></A></TD>
</TR>
</TABLE>
</TD>
</TR>
效果
全部代码(含前边介绍的换其他图片的导航)
<html>
<head>
<script>
var urls = new Array();
urls[0] = new Array();
urls[0][0]="img0.html";
urls[0][1]="img1.html";
urls[0][2]="img2.html";
urls[0][3]="img3.html";
urls[0][4]="img4.html";
urls[0][5]="img5.html";
urls[0][6]="img6.html";
urls[0][7]="img7.html";
urls[0][8]="img8.html";
urls[0][9]="img9.html";
urls[0][10]="img10.html";
urls[1] = new Array();
urls[1][0]="img_logo.html";
urls[1][1]="img_one.html?src=images/tmp/KEteltu1.jpg&title="+encodeURIComponent("400电话图");
urls[1][2]="img_one.html?src=images/menu/hot.jpg&title="+encodeURIComponent("热卖推荐");
urls[1][3]="img_one.html?src=images/menu/yushiyongpin.jpg&title="+encodeURIComponent("主页第2张导航小图");
urls[1][4]="img_one.html?src=images/menu/chuangpin.jpg&title="+encodeURIComponent("主页第3张导航小图");
urls[1][5]="img_one.html?src=images/menu/chuangpintaozhuang.jpg&title="+encodeURIComponent("主页第4张导航小图");
urls[1][6]="img_one.html?src=images/menu/ertongfang.jpg&title="+encodeURIComponent("主页第5张导航小图");
urls[1][7]="img_one.html?src=images/menu/beixin.jpg&title="+encodeURIComponent("主页第6张导航小图");
urls[1][8]="img_one.html?src=images/menu/zhenxin.jpg&title="+encodeURIComponent("主页第7张导航小图");
urls[1][9]="img_one.html?src=images/foot.jpg&title="+encodeURIComponent("页脚导航图");
</script>
<TITLE>网页图片管理</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<LINK href="@{sys:path}base/css/main.css" type="TEXT/CSS" rel="STYLESHEET">
</head>
<BODY bottomMargin="2" leftMargin="4" topMargin="4" scroll="no" rightMargin="4" bgcolor="#70ADDE" οnlοad="showSub(0)">
<TABLE class="ViewListLocal" cellSpacing="0" cellPadding="0" width="100%" border="0">
<TR>
<TD background="@{sys:path}images/menu_bg.gif" valign="middle" width="100%" height="21" align="center">
<TABLE width="96%"><TR align="center"><TD οnmοuseup="this.className='TopLink_over'" οnmοusedοwn="this.className='TopLink_down'" οnmοuseοver="this.className='TopLink_over'" style="CURSOR: pointer" οnmοuseοut="this.className=''" οnclick="showSub(0)"><NOBR>换动态图片</NOBR></TD></TR></TABLE>
</TD>
</TR>
<TR vAlign="top">
<TD>
<TABLE cellSpacing="0" cellPadding="0" width="90%" align="center" border="0" id="sub0" style="display:none">
<TR vAlign="middle" height="20">
<TD width="9%"><IMG src="@{sys:path}images/k7.gif"></TD>
<TD width="91%"> <A href="javascript:void(0)" onClick="openUrl(0,0)"><NOBR>主题图片管理</NOBR></A></TD>
</TR>
<TR vAlign="middle" height="20" style="display:none">
<TD width="9%"><IMG src="@{sys:path}images/k7.gif"></TD>
<TD width="91%"> <A href="javascript:void(0)" onClick="openUrl(0,1)"><NOBR>滚动图片管理</NOBR></A></TD>
</TR>
<TR vAlign="middle" height="20">
<TD width="9%"><IMG src="@{sys:path}images/k7.gif"></TD>
<TD width="91%"> <A href="javascript:void(0)" onClick="openUrl(0,2)"><NOBR>今日特价</NOBR></A></TD>
</TR>
<TR vAlign="middle" height="20">
<TD width="9%"><IMG src="@{sys:path}images/k7.gif"></TD>
<TD width="91%"> <A href="javascript:void(0)" onClick="openUrl(0,3)"><NOBR>主页第1张大横广告</NOBR></A></TD>
</TR>
<TR vAlign="middle" height="20">
<TD width="9%"><IMG src="@{sys:path}images/k7.gif"></TD>
<TD width="91%"> <A href="javascript:void(0)" onClick="openUrl(0,4)"><NOBR>主页第2张大横广告</NOBR></A></TD>
</TR>
<TR vAlign="middle" height="20" style="display:none">
<TD width="9%"><IMG src="@{sys:path}images/k7.gif"></TD>
<TD width="91%"> <A href="javascript:void(0)" onClick="openUrl(0,5)"><NOBR>女装</NOBR></A></TD>
</TR>
<TR vAlign="middle" height="20" style="display:none">
<TD width="9%"><IMG src="@{sys:path}images/k7.gif"></TD>
<TD width="91%"> <A href="javascript:void(0)" onClick="openUrl(0,6)"><NOBR>男装</NOBR></A></TD>
</TR>
<TR vAlign="middle" height="20">
<TD width="9%"><IMG src="@{sys:path}images/k7.gif"></TD>
<TD width="91%"> <A href="javascript:void(0)" onClick="openUrl(0,7)"><NOBR>特价广告</NOBR></A></TD>
</TR>
<TR vAlign="middle" height="20" style="display:none">
<TD width="9%"><IMG src="@{sys:path}images/k7.gif"></TD>
<TD width="91%"> <A href="javascript:void(0)" onClick="openUrl(0,8)"><NOBR>实体店主题图片</NOBR></A></TD>
</TR>
<TR vAlign="middle" height="20" style="display:none">
<TD width="9%"><IMG src="@{sys:path}images/k7.gif"></TD>
<TD width="91%"> <A href="javascript:void(0)" onClick="openUrl(0,9)"><NOBR>实体店销量排行</NOBR></A></TD>
</TR>
<TR vAlign="middle" height="20" style="display:none">
<TD width="9%"><IMG src="@{sys:path}images/k7.gif"></TD>
<TD width="91%"> <A href="javascript:void(0)" onClick="openUrl(0,10)"><NOBR>店员风采</NOBR></A></TD>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<TD background="@{sys:path}images/menu_bg.gif" valign="middle" width="100%" height="21" align="center">
<TABLE width="96%"><TR align="center"><TD οnmοuseup="this.className='TopLink_over'" οnmοusedοwn="this.className='TopLink_down'" οnmοuseοver="this.className='TopLink_over'" style="CURSOR: pointer" οnmοuseοut="this.className=''" οnclick="showSub(1)"><NOBR>换图片(1张)</NOBR></TD></TR></TABLE>
</TD>
</TR>
<TR vAlign="top">
<TD>
<TABLE cellSpacing="0" cellPadding="0" width="90%" align="center" border="0" id="sub1" style="display:none">
<TR vAlign="middle" height="20">
<TD width="9%"><IMG src="@{sys:path}images/k7.gif"></TD>
<TD width="91%"> <A href="javascript:void(0)" onClick="openUrl(1,0)"><NOBR>Logo</NOBR></A></TD>
</TR>
<TR vAlign="middle" height="20">
<TD width="9%"><IMG src="@{sys:path}images/k7.gif"></TD>
<TD width="91%"> <A href="javascript:void(0)" onClick="openUrl(1,1)"><NOBR>400电话图</NOBR></A></TD>
</TR>
<TR vAlign="middle" height="20">
<TD width="9%"><IMG src="@{sys:path}images/k7.gif"></TD>
<TD width="91%"> <A href="javascript:void(0)" onClick="openUrl(1,2)"><NOBR>热卖推荐</NOBR></A></TD>
</TR>
<TR vAlign="middle" height="20">
<TD width="9%"><IMG src="@{sys:path}images/k7.gif"></TD>
<TD width="91%"> <A href="javascript:void(0)" onClick="openUrl(1,3)"><NOBR>主页第2张导航小图</NOBR></A></TD>
</TR>
<TR vAlign="middle" height="20">
<TD width="9%"><IMG src="@{sys:path}images/k7.gif"></TD>
<TD width="91%"> <A href="javascript:void(0)" onClick="openUrl(1,4)"><NOBR>主页第3张导航小图</NOBR></A></TD>
</TR>
<TR vAlign="middle" height="20">
<TD width="9%"><IMG src="@{sys:path}images/k7.gif"></TD>
<TD width="91%"> <A href="javascript:void(0)" onClick="openUrl(1,5)"><NOBR>主页第4张导航小图</NOBR></A></TD>
</TR>
<TR vAlign="middle" height="20">
<TD width="9%"><IMG src="@{sys:path}images/k7.gif"></TD>
<TD width="91%"> <A href="javascript:void(0)" onClick="openUrl(1,6)"><NOBR>主页第5张导航小图</NOBR></A></TD>
</TR>
<TR vAlign="middle" height="20">
<TD width="9%"><IMG src="@{sys:path}images/k7.gif"></TD>
<TD width="91%"> <A href="javascript:void(0)" onClick="openUrl(1,7)"><NOBR>主页第6张导航小图</NOBR></A></TD>
</TR>
<TR vAlign="middle" height="20">
<TD width="9%"><IMG src="@{sys:path}images/k7.gif"></TD>
<TD width="91%"> <A href="javascript:void(0)" onClick="openUrl(1,8)"><NOBR>主页第7张导航小图</NOBR></A></TD>
</TR>
<TR vAlign="middle" height="20">
<TD width="9%"><IMG src="@{sys:path}images/k7.gif"></TD>
<TD width="91%"> <A href="javascript:void(0)" onClick="openUrl(1,9)"><NOBR>页脚导航图</NOBR></A></TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</BODY>
<script>
var old = -1;
showSub = function (i)
{
try{
var aObj;
if(old!=-1)
{
aObj = document.getElementById("sub"+old);
aObj.style.display = "none";
}
if(old!=i)
{
aObj = document.getElementById("sub"+i);
aObj.style.display = "block";
old = i;
openUrl(i,0);
}
else old = -1;
}catch(err){}
}
openUrl = function (i,j)
{
var url = urls[i][j];
try{
if(url!="")
{
top.data.location = url;
}
}catch(err){}
}
</script>
</html>
三个文件都在轻开电子商务系统(企业入门级B2C网站) 的site/links/目录下
轻松互联网开发平台(Easy Do IT)资源下载
开发实例:企业入门级B2C电子商务网站(含轻开源码),免费下载:http://download.csdn.net/detail/tx18/8818883
轻开平台(技术QQ群:460801944)会不定期升级为大家提供更多强大而Easy的功能,请留意下载最新的版本
本文可自由传播