<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ProductPhoto.aspx.cs" Inherits="EC_B2C.Admin.ProductPhoto" %>
<!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> <script type="text/javascript"> //定义一个全局变量 var x = 1; function addInputFile(id) {
if (id == 10) { alert("最多只能上传10个文件"); return; } x++;
//得到装有控件的div var container = document.getElementById("divFiles"); var br = document.createElement("br"); container.appendChild(br); //创建子节点 input var file = document.createElement("input"); //设置属性值 file.setAttribute("type", "file"); //创建id,name属性 file.setAttribute("id", "file_" + x); file.setAttribute("name", "file_" + x); //添加到div中 container.appendChild(file); //创建intput -button var btn = document.createElement("input"); //设置属性 btn.setAttribute("type", "button"); btn.setAttribute("value", "-"); //添加到div container.appendChild(btn); btn.attachEvent ? btn.attachEvent("onclick", removeInputFile) : btn.addEventListener("click", removeInputFile, false); /* 定义onclick事件 IE事件处理程序 attachEvent("onclick", removeInputFile) 只支持时间冒泡,所以通过attachEvent() 添加的事件处理程序都会被添加到冒泡阶段 this相当于window 其他浏览器事件处理程序 addEventListener("click", removeInputFile, false) 最后的布尔值参数,true:表示在捕获阶段调用事件处理程序;false:表示在冒泡阶段调用事件处理程序。 大多数情况下,都是将事件处理程序添加到事件流的冒泡阶段,以便兼容各种浏览器。 区别: DOM0级方法,事件处理程序会在所属元素的作用域内运行; attachEvent()方法,事件处理程序会在全局作用域中运行,因此 this等于 window。 */
} /* 想要知道是哪个元素触发了某事件是,我们可以从该事件函数中获得这个元素, 但是不同的浏览器,获得这个元素的方法不同 在W3C标准中,使用evt.target,而IE为evt.srcElement —————————————————————————————————————— 做事件处理时用于区分IE和其他浏览器的 var e = evt || window.event; IE6/7/8支持通过window.event获取对象, 通过attachEvent方式添加事件时也支持事件对象作为句柄第一个参数传入 因为IE6/7/8在attachEvent方式添加事件时同时支持两种方式,所以事件句柄中的参数evt在 IE6/7/8中会自动转换为window.event。 */ function removeInputFile(evt) { //获得事件对象 var e = evt || window.event; //获得触发该事件的元素 var target = e.target || e.srcElement; //得到父节点 var container = document.getElementById("divFiles"); container.removeChild(target.previousSibling.previousSibling); container.removeChild(target.previousSibling); container.removeChild(target);
x--;
} </script> <style type="text/css"> .div { border:1px solid #999999; float:left; margin:2px; } #spans { margin-left:800px; } </style> </head> <body>
<form id="form1" runat="server" enctype="multipart/form-data">
<div style=" margin-bottom:20px;">
<font size="5">商品相册列表</font>
</div>
<span id="spans"><a href="ProductList.aspx">返回商品信息列表</a></span>
<hr width="100%" size="2px;"/>
<div style="width:650px;">
<asp:Repeater ID="Repeaterphoto" runat="server" OnItemCommand="Repeaterphoto_ItemCommand">
<ItemTemplate>
<div class="div">
<div >
<image id="Image1" runat="server" width="150px" height="150px" src='<%#Eval("Photo","/Images/{0}") %>'/>
</div>
<asp:Button ID="ButtonDelete" runat="server" Text="删除" CommandName="deleted" CommandArgument='<%#Eval("ID") %>'/>
</div>
</ItemTemplate>
<FooterTemplate>
<div style=" clear:both;">
<div id="divFiles">
<input type="button" id="btn_1" value="+" onclick='addInputFile(<%#Eval("ID") %>)' /><br />
<input type="file" id="file_1" name="file_1" />
</div>
<asp:Button ID="Button1" runat="server" Text="上传" onclick="Button1_Click" />
</div>
</FooterTemplate>
</asp:Repeater>
</div>
</form>
</body>
</html>
真乱 没办法看
不好意思啊,才开始学