网易邮箱添加附件功能原理浅析--转

本文转自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这两个属性。

posted @   老皮肉  阅读(698)  评论(0)  编辑  收藏  举报
编辑推荐：
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行：
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
点击右上角即可分享
微信分享提示