本文转自http://blog.csdn.net/whwqs/article/details/2458628
个人觉得网易邮箱的添加附件功能是比较酷的，这两天网上网下研究了下。有些心得写出来，免得遗忘。
一切起源于type为file的input，这是没话可多说的（这个东西很神秘）。为什么网易页面上却没有看见这个东西？看下面：
<html><head><title>上传控件演示</title></head><body><input type="file" id="f1" style="display:none;" /><input type="button" onclick="f1.click();" value="文件浏览" /></body></html>正如上面看到的：看不见它，却也能够打开文件浏览框。
做成网易效果了吗？
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="mytest_test" %><!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><title>上传控件演示</title></head><body><form id="form1" runat="server"><input type="file" name="f1" id="f1" runat="server" /><input type="button" value="浏览文件" name="cbtn" onclick="f1.click();" /><asp:Button ID="submit" runat="server" OnClick="Button1_Click1" Text="保存" /></form></body></html>using System;using System.Data;using System.Configuration;using System.Collections;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;public partial class mytest_test : System.Web.UI.Page{
protected void Page_Load(object sender, EventArgs e)
{
} protected void Button1_Click1(object sender, EventArgs e) { Response.Write("上传文件数目："+Request.Files.Count.ToString()); }
}如上：点击f1后点击submit，有一个文件上传到服务端。点击cbtn后点击submit，连提交动作都没有。
在客户端看来：点击f1后或点击cbtn后页面表现没有区别。
网上的解释：浏览器的安全机制。
上传文件要点：（1）必须要有鼠标点击；（2）必须点击在上传控件的浏览按钮上。
类似163的实现：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="mytest_test" %><!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 id="Head1" runat="server"><title>163上传</title><style type="text/css"> a.addfile { background-image:url(http://p.mail.163.com/js31style/lib/0703131650/163blue/f1.gif); background-repeat:no-repeat; background-position:-915px -17px; display:block; float:left; height:20px; margin-top:-1px; position:relative; text-decoration:none; top:0pt; width:80px; } input.addfile { cursor:pointer !important; height:18px; left:-13px; filter:alpha(opacity=0); position:absolute; top:5px; width:1px; z-index:-1; } </style></head><body><form id="form1" runat="server"><div><a id="container1" class="addfile"><input id="file_0" name="file_0" type="file" class="addfile" runat="server" /></a></div> <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" /></form></body></html>using System;using System.Data;using System.Configuration;using System.Collections;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;public partial class mytest_test : System.Web.UI.Page{ protected void Page_Load(object sender, EventArgs e) { } protected void Button1_Click(object sender, EventArgs e) { Response.Write("上传文件数目：" + Request.Files.Count.ToString()); }}要点：（1）把上传控件放在a标签中；（2）上传控件透明（不是display：none）；（3）a标签衬背景。
接下来，做批量的效果：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="mytest_test" %><!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 id="Head1" runat="server"><title>163上传</title><style type="text/css"> a.addfile { background-image:url(http://p.mail.163.com/js31style/lib/0703131650/163blue/f1.gif); background-repeat:no-repeat; background-position:-915px -17px; display:block; float:left; height:20px; margin-top:-1px; position:relative; text-decoration:none; top:0pt; width:80px; } input.addfile { cursor:pointer !important; height:18px; left:-13px; filter:alpha(opacity=0); position:absolute; top:5px; width:1px; z-index: -1; } img.addfile { background-image:url(http://p.mail.163.com/js31style/lib/0703131650/163blue/f1.gif); background-repeat:no-repeat; background-position:-802px -36px; width:13px; height:13px;}</style><script type="text/javascript">window.$ = document.getElementById;var fileNumber = 0;function createnew(){ var c_a = $('container1');// 找到上传控件的a容器 var c_div = $('container2');// 放置文件的容器 var fileCtr = c_a.firstChild;// 上传控件 var subDiv = document.createElement("div");// 将放置到c_div中的容器 var span1 = document.createElement("span");// 上传的文件 span1.innerText = fileCtr.value; var img2 = document.createElement("img");// 删除图片按钮 img2.className = "addfile"; img2.onclick = function(){this.parentNode.parentNode.removeChild(this.parentNode)} subDiv.appendChild(span1); subDiv.appendChild(img2); subDiv.appendChild(fileCtr); c_div.appendChild(subDiv); fileNumber++; var newFileCtr = document.createElement("input"); newFileCtr.type = "file"; newFileCtr.className = "addfile"; newFileCtr.runat = "server"; newFileCtr.name = "file_"+fileNumber; newFileCtr.onchange = createnew; while(c_a.firstChild) { c_a.removeChild(c_a.firstChild); } c_a.appendChild(newFileCtr);} </script></head><body><form id="form1" runat="server"><div><a id="container1" class="addfile"><input id="File1" name="file_0" type="file" class="addfile" onchange="createnew();" runat="server" /></a></div><div id="container2" style="position:relative; float:left; "></div><asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" /></form></body></html>using System;using System.Data;using System.Configuration;using System.Collections;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;public partial class mytest_test : System.Web.UI.Page{ protected void Page_Load(object sender, EventArgs e) { } protected void Button1_Click(object sender, EventArgs e) { string s = ""; for (int i = 0; i < Request.Files.Count; i++) { s += Request.Files[i].FileName + "<br/>"; } Response.Write(s); }}差不多实现了163的添加附件效果，但未判断相同文件上传情况。
要点：上传控件的onchange事件。这个事件在选择文件之后。在这个事件中移走旧的上传控件，创建新的上传控件。创建上传控件时一定别忘了name和runat这两个属性。