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