码迷，mamicode.com
首页 > Web开发 > 详细

换静态图片---轻开电子商务系统(企业入门级B2C网站)

时间：2015-07-01 06:18:50      阅读：228      评论：0      收藏：0      [点我收藏+]

标签：b2c   电子商务   互联网   企业b2c入门   企业入门b2c   

一共3个文件：

  1. 显示及上传文件：site/links/img_one.html
  2. 保存图片文件：site/links/img_one_up1.chtml
  3. 导航菜单文件：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" onsubmit="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" onload="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" onsubmit="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" onload="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 onmouseup="this.className='TopLink_over'" onmousedown="this.className='TopLink_down'" onmouseover="this.className='TopLink_over'" style="CURSOR: pointer" onmouseout="this.className=''" onclick="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 onmouseup="this.className='TopLink_over'" onmousedown="this.className='TopLink_down'" onmouseover="this.className='TopLink_over'" style="CURSOR: pointer" onmouseout="this.className=''" onclick="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的功能，请留意下载最新的版本
本文可自由传播

版权声明：本文为博主原创文章，未经博主允许不得转载。

换静态图片---轻开电子商务系统(企业入门级B2C网站)

标签：b2c   电子商务   互联网   企业b2c入门   企业入门b2c   

原文地址：http://blog.csdn.net/tx18/article/details/46703705
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！