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

个人觉得网易邮箱的添加附件功能是比较酷的，这两天网上网下研究了下。有些心得写出来，免得遗忘。

一切起源于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这两个属性。

网易邮箱添加附件功能原理浅析相关推荐

  1. 批量上传不同图片(网易邮箱添加附件的应用)

    <% @ Page Language = " C# "  AutoEventWireup = " true "  CodeFile = " 16 ...

  2. html 如何添加附件,javascript实现添加附件功能的方法

    在邮件中我们经常用到添加附件,现在简单的应用下: 效果图: 实现原理: 采用table标签的,主要思想:采用table标签方式 1.点击文字之后,就自动创建(原先是自己/创建,现在拿到table对象之 ...

  3. android 信息添加附件功能,网易邮箱Android新版 添加附件可直接预览

    网易邮箱Android客户端近日发布了新版本V2.3,新版安卓客户端对附件处理做出较大改进.用户转发邮件附件时,不需要下载到本地实现直接转发,更加方便:写信时,添加附件由原先的列表形式变成预览图形式, ...

  4. 网易邮箱添加html,在网易邮箱中实行添加标签窗口的详细步骤

    使用网易邮箱的伙伴们,知道怎么样添加标签窗口吗?若是不知道,那就去下文看看在网易邮箱中实行添加标签窗口的详细步骤. 首先在你的电脑浏览器中找到网易网页,在上方有一个"登录"窗口,点 ...

  5. 网易邮箱显示附件上传不成功，请重试！(错误码:FR_INVALID_REQUEST) 的解决方法

    近段时间,单位里的部分电脑使用网易邮箱出了问题:上传附件的过程中卡住,最后给出提示: 请重试!(错误码:FR_INVALID_REQUEST) 单位里的电脑都在一个网域网里,通过同一条线共享上网的,怎 ...

  6. 网易邮箱大师日历功能的同步问题

    问题的提出: 我本来是在公司的工作机器上安装了一个网易邮箱大师.可以支持多个邮箱的的邮件管理,体验还是可以的.能够同时管理我所有的私人邮箱,这点挺方便.然而他的日历功能做得也不错,一直用着. 然而,最 ...

  7. android 添加附件功能,Android实现带附件的邮件发送功能

    本文实例讲解了基于基于jmail实现android邮件发送功能,分享给大家供大家参考,具体内容如下 在android上发送邮件方式: 第一种:借助gmail app客户端,缺点是必须使用gmail帐号 ...

  8. android 信息添加附件功能,Android实现带附件的邮件发送功能

    本文实例讲解了基于基于JMail实现Android邮件发送功能,分享给大家供大家参考,具体内容如下 在android上发送邮件方式: 第一种:借助GMail APP客户端,缺点是必须使用GMail帐号 ...

  9. iPhone 的 Push(推送通知)功能原理浅析

    第一部分:Push原理 (以下绝大多数内容参考自.图片来自iPhone OS Reference Library) 机制简介 Push 的工作机制可以简单的概括为下图 图中, Provider是指某个 ...

最新文章

  1. 世界各大天文台联合预警：今晚公布“引力波重要发现”
  2. autofac 用法总结
  3. Windows文件目录DOS窗口
  4. Apache Common常用jar包
  5. mysql binlog redo_mysql的binlog与redo log
  6. c语言五子棋评估函数,简易五子棋评估函数
  7. MySQL启用SSL连接
  8. ListView上拉加载，下拉刷新 PullToRefresh的使用
  9. 洛谷P2709 小B的询问
  10. 【网络基础】《TCP/IP详解》学习笔记6
  11. 安卓手机qq怎么看密友值_qq密友值在哪看
  12. Kata: 从随机的三字符列表组中恢复秘密字符串
  13. 在Global Mapper中导入点的文本格式
  14. 计算机右键管理是什么软件,右键管理工具打不开怎么办【图文】
  15. 前端基础入门之css表格与表单
  16. c语言乒乓球对手算法,乒乓球学生论文,关于例c语言教学案例设计相关参考文献资料-免费论文范文...
  17. 当我开始学微信公众号开发时，我要学什么？
  18. [不变初心数(15分] 用数组存储不变的数最后对照即可
  19. 独立游戏如何俘获全球玩家 | Google Play 开发者中文播客节目
  20. 推荐计算机 在线使用方法,在线记笔记平台推荐：如何优雅地用电脑记笔记

热门文章

  1. 匈牙利为庆贺第17届奥运会而发行的纪念邮票
  2. 基于主定理以及递推树求解递归算法的时间复杂度
  3. 激扬巾帼风采，谱写美丽人生
  4. GetDC、GetDCEx、GetWindowDC - [Daily APIs]
  5. ps系列 -- 给人物添加光影
  6. 教学方法（学科教学法）
  7. node.js基于微信小程序的外卖订餐系统 uniapp 小程序
  8. postgresql中替换字符串中的换行符和回车符号
  9. 使用java进行pdf转word实战
  10. 支付宝与微信对账文件解析