網易郵箱添加附件功能原理淺析

網易郵箱添加附件功能原理淺析

個人覺得網易郵箱的添加附件功能是比較酷的，這兩天網上網下研究了下。有些心得寫出來，免得遺忘。

一切起源於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;