类似于淘宝宝贝展示那个地方,点小图,大图就显示小图内容,加了删除功能...

这块功能主要是用于多图上传后的管理.如果多图的地址是存在cookies里的

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Store_Commodity.aspx.cs" Inherits="Store_Commodity" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>商品编辑</title>

</head>
 <SCRIPT LANGUAGE="JavaScript">
<!--
//图片按比例缩放
var flag=false;
function DrawImage(ImgD,iwidth,iheight){
var image=new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0){
flag=true;
if(image.width/image.height>= iwidth/iheight){
if(image.width>iwidth){ 
ImgD.width=iwidth;
ImgD.height=(image.height*iwidth)/image.width;
}else{
ImgD.width=image.width; 
ImgD.height=image.height;
}
ImgD.alt=image.width+"×"+image.height;
}
else{
if(image.height>iheight){ 
ImgD.height=iheight;
ImgD.width=(image.width*iheight)/image.height;       
}else{
ImgD.width=image.width; 
ImgD.height=image.height;
}
ImgD.alt=image.width+"×"+image.height;
}
}
}
 
 


//读取cookies
function getCookie(name)
{   
        var offset,cookieValue;
        var search=name+"=";
        if(document.cookie.length>0)
        {
            offset=document.cookie.indexOf(search);
            if(offset!=-1)
            {
                offset += search.length;  
                end = document.cookie.indexOf(";", offset);  
                if (end == -1)
                    end = document.cookie.length;  
                cookieValue=unescape(document.cookie.substring(offset, end));
            }
        }
        return cookieValue;
}

//设置cookies
function setCookie(name,value,hours){
    var name = escape(name);
    var value = escape(value);
    var expires = new Date();
     expires.setTime(expires.getTime() + hours*3600000);
     path =";path=/";
     _expires = (typeof hours) == "string" ? "" : ";expires=" + expires.toUTCString();
     document.cookie = name + "=" + value + _expires + path;
}


//删除cookies
function delCookie(name){
    var name = escape(name);
    var expires = new Date(0);
     path =";path=/";
     document.cookie = name + "="+ ";expires=" + expires.toGMTString() + path;
}

function Pic_List()
{
//更新图片列表
      var GetPic="";
   var d1Pic = document.getElementById('DIVPicList');
   var str=getCookie("Store_Pic");
      var strs = new Array();                  // 定义一个数组  
      strs = str.split("|");                   // 字符分割        
      for (i = 1; i < strs.length; i++)  
      {  
         if (i==1)
         {
            document.getElementById("BigImg").src= strs[i];
            document.getElementById("BigImg").style.display='';
         }
         GetPic+=("<a href='#' title='点击删除此图片' onClick=\"DelPic('" + strs[i] + "')\" /><img src='" + strs[i] + "' width='40' height='40' border='0' class='ViewSmallPic' οnmοusemοve=\"BigImg.src='" + strs[i] + "';BigImg.style.display=''\"/></a>");   // 分割后的字符输出
      }
      d1Pic.innerHTML =GetPic;
}
  
//图列表管理
function DelPic(Pic)
{
        var str=getCookie("Store_Pic");
        var strs = new Array();                  // 定义一个数组  
        strs = str.split("|"+Pic);
        var NewStr=strs[0]+strs[1];
       
        //更改cookies值
        if (NewStr=="")
        {
//        document.getElementById("ImgLink").value="";
        document.getElementById("BigImg").style.display="none";
        delCookie("Store_Pic");
//        setCookie("Store_Pic","",-1);
       
        }
        else
        {
//        document.getElementById("ImgLink").value=strs[0]+strs[1];
        setCookie("Store_Pic",strs[0]+strs[1],1)
        }
       
        //更新小图列表
        Pic_List();
       
}
     
function allCookie(){//读取所有保存的cookie字符串
    var str = document.cookie;
    if(str == ""){
     str = "没有保存任何cookie";
    }
    return(str);
   }

 document.write(allCookie());
//-->
 </script>
<script src="JS/nicEdit.js" type="text/javascript"></script>

    <script type="text/javascript">
            bkLib.onDomLoaded(function() {
                new nicEditor({ fullPanel: true }).panelInstance('TextBox_Info');
            });
        </script>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        商品图片:
        <div id="ViewBigPic"><img src="" name="BigImg" id="BigImg" οnlοad="javascript:DrawImage(this,300,300)"/>&nbsp;</div>
        <div id="DIVPicList">
 <script language=javascript>
 
   Pic_List();
     
 </script>
 </div>
        <div> 
    </div>  <br />
        Yu_Commodity_Name 商品名称 :<asp:TextBox ID="TextBox_Name" runat="server"></asp:TextBox><br />
        Yu_Commodity_Cost 成本价 :<asp:TextBox ID="TextBox_Cost" runat="server"></asp:TextBox>元<br />
        Yu_Commodity_price 售价 :<asp:TextBox ID="TextBox_Price" runat="server"></asp:TextBox>元<br />
        Yu_Commodity_num 商品数量:<asp:TextBox ID="TextBox_Num" runat="server"></asp:TextBox>件<br />
        Yu_Commodity_Brand 品牌 :<asp:TextBox ID="TextBox_Brand" runat="server"></asp:TextBox><br />
        Yu_Commodity_Type 所属类别:<asp:UpdatePanel ID="UpdatePanel1" runat="server" RenderMode="Inline">
                <ContentTemplate>
                    <asp:DropDownList ID="DropDownList_1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="DropDownList_1_SelectedIndexChanged">
                    </asp:DropDownList>
                    <asp:DropDownList ID="DropDownList_2" runat="server" AutoPostBack="True" OnSelectedIndexChanged="DropDownList_2_SelectedIndexChanged" Visible="False">
                    </asp:DropDownList>
                    <asp:DropDownList ID="DropDownList_3" runat="server" Visible="False">
                    </asp:DropDownList>
                </ContentTemplate>
            </asp:UpdatePanel>
        <br />
        Yu_Commodity_Info 详细信息 :<asp:TextBox ID="TextBox_Info" runat="server" TextMode="MultiLine" Width="400px"></asp:TextBox><br />
        <asp:Button ID="Button_Commodity" runat="server" Text="提交" /><a href="Store_Up_Pic.aspx">上一步</a></div>
    </form>
</body>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值