Go homepage(回首页) Upload pictures (上传图片) Write articles (发文字帖)
The author:(作者)归海一刀published in(发表于) 2014/1/30 1:07:37 使用Asp.Net2.0，编写类似GMail的文件上传系统_[Asp.Net教程]
原文地址：http://aspalliance.com/1441_Building_a_Gmail_Style_File_Uploading_System_using_ASPNET_20.1 作者：Jesudas Chinnathampi (Das) 译者：兴百放 1.简介 2.关于input Html Control 3.使用iframe标签 4.工作原理 5.在线测试 6.下载 7.摘要 1。简介 一个标准的文件上传程序包含一个文本框，浏览按钮和一个上传的确定按钮，使用浏览按钮来弹出”文件选择”对话框，选择相应的文件，之后点击上传确定按钮从客户端上传到服务器端。 接下来看一下Gmai中的上传附件处理，如果你细心的话，你可以发现它在处理上传附件的时候，没有浏览按钮，只是一个名叫”添加附件”的超级链接，当你点击这个链接，就会出现文件选择对话框，之后你选择一个文件，并且单击“打开”按钮，文件已经上传成功了。 Gmail的文件上传和平常的文件上传不同的就是没有浏览和确定按钮。这里主要有三个方便之处。首先，用户只是一次鼠标点击（而没有二次在点击确定上传），其二代替文本框和按钮的只有一个漂亮的超级链接，对用户很友好。其三，上传的文件只在用户点击打开按钮后就上传到了服务器。 您的Web页中也可以实现这种很酷效果，但是遗憾的是这篇文章中的这个方法只能在IE下工作。 下面具体的看一下怎样实现这种效果： 2。关于input HtmlControl 首先来研究一下Input HTMLControl 在浏览器中呈现的是一个选择文件浏览按钮和一个文本框，下面我来解释一下HTML控件，首先它的值属性是只读的，因为出于浏览器的安全机制，我们不能使用代码来给他分配一个值，唯一的方法就是我们只能点击浏览按钮并且选择一个文件来给他分配。 另一个重要的方面是我们不能为此控件调用点击事件比如：
在上面的代码中，我们试着在page的load事件中调用Brower函数，当我们运行此代码，在页面装载完后，就出出现”选择文件”对话框，但是当你选择文件并点击对话框中的打开按钮的时候，就会出现JavaScript 错误：-“访问被拒绝”.而产生这个错误的原因就是document.form1.submit();(我在测试的时候并没有出现这个javascript错误，不知道什么原因，只是造成死循环如果哪位知道的话可以在下面留言，解释一下) 如果Gmail能做出这样的效果，我们也能做出来。思考了好长时间并且在网上读了一些相关文章，怎样使用没有浏览按钮来上传文件呢，最终发现，我们可以用两个页面来完成它；一个包含标签的主页面，和一个iframe指向的页面。<BR><BR> <STRONG> <STRONG><STRONG>3.使用<iframe></STRONG><STRONG>标签</STRONG></STRONG><STRONG><BR></STRONG></STRONG> 正如我上面提到的，我们需要两个页面来完成这个技巧。<BR> 主页面Main.aspx包含：<BR> 1） 一个超级连接<BR> 2） <iframe>标签，Src属性指向UpLoad.aspx<BR> 在Upload.aspx页面包含<BR> 1) 一个<input type=file>的Html Control(设为隐藏Visibility=hidden)<BR> 2) 一个提交按钮(同上)<BR> 当用户在Main.aspx中点击超链接的时候,我们必须调用在Upload.aspx中的<input type=file>控件的<I>onclick</I>事件，让他显示文件选择对话框。为了提交这个表单，我们还必须调用在Upload.aspx中隐藏提交按钮的<I>onclick</I>事件,这次就不会出现上次的那种Javascript错误，奇怪的你就会想，为什么同样的代码在有iframe标签的页面中就能正常运行，而在没有iframe标签的页面就不能运行呢？迷糊。。但它确实成功运行了！<BR> 下面是Main.aspx的代码<BR></P> <br/> <br/> <br/><DIV style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 13px; PADDING-BOTTOM: 4px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 98%; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #eeeeee"><%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="temp_Default2" %><BR><BR><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><BR><BR><html xmlns="http://www.w3.org/1999/xhtml" ><BR><head runat="server"><BR> <title>上传文件</title><BR> <BR></head><BR><body ><BR> <form id="form1" runat="server"><BR> <div><BR> <a href="#" <I>onclick</I>="javascript：Browse();">上传文件</a><BR> <iframe src="Upload.aspx" frameborder="0" id="ifu" name="ifu">