网易邮箱添加附件功能原理浅析
个人觉得网易邮箱的添加附件功能是比较酷的，这两天网上网下研究了下。有些心得写出来，免得遗忘。
一切起源于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这两个属性。
