本文转自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>

正如上面看到的:看不见它,却也能够打开文件浏览框。

做成网易效果了吗?

</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
}

如上:点击f1后点击submit,有一个文件上传到服务端。点击cbtn后点击submit,连提交动作都没有。

在客户端看来:点击f1后或点击cbtn后页面表现没有区别。

网上的解释:浏览器的安全机制。

上传文件要点:(1)必须要有鼠标点击;(2)必须点击在上传控件的浏览按钮上。

类似163的实现:

</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
}

要点:(1)把上传控件放在a标签中;(2)上传控件透明(不是display:none);(3)a标签衬背景。

接下来,做批量的效果:

</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
}

差不多实现了163的添加附件效果,但未判断相同文件上传情况。

要点:上传控件的onchange事件。这个事件在选择文件之后。在这个事件中移走旧的上传控件,创建新的上传控件。创建上传控件时一定别忘了name和runat这两个属性。

相关文章:

  • 2021-07-29
  • 2022-12-23
  • 2021-11-22
  • 2021-07-19
  • 2022-12-23
  • 2021-11-20
  • 2022-12-23
  • 2021-07-19
猜你喜欢
  • 2021-06-02
  • 2021-11-06
  • 2022-12-23
  • 2021-09-15
  • 2021-10-27
  • 2022-12-23
  • 2021-08-17
相关资源
相似解决方案