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