使用Asp.Net2.0，编写类似GMail的文件上传系统

使用Asp.Net2.0，编写类似GMail的文件上传系统

    原文地址： 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
         <input type=file>在浏览器中呈现的是一个选择文件浏览按钮和一个文本框，下面我来解释一下<input typ=file>HTML控件，首先它的值属性是只读的，因为出于浏览器的安全机制，我们不能使用代码来给他分配一个值，唯一的方法就是我们只能点击浏览按钮并且选择一个文件来给他分配。
         另一个重要的方面是我们不能为此控件调用点击事件比如：
       

< html >
< head >
     < title > File Upload </ title >
     < script  language ="javascript"  type ="text/javascript" >
     function  Browse()
    {
        document.form1.myFile.click();
        document.form1.submit();
    }
     </ script >    
</ head >
< body  onload ="javascript:Browse();" >
< form  id ="form1"  runat ="server" >
     < input  type ="file"  runat ="server"  name ="myFile"  id ="myFile" >
</ form >
</ body >
</ html >

      在上面的代码中，我们试着在page的load事件中调用Brower函数，当我们运行此代码，在页面装载完后，就出出现”选择文件”对话框，但是当你选择文件并点击对话框中的打开按钮的时候，就会出现JavaScript 错误：-“访问被拒绝”.而产生这个错误的原因就是document.form1.submit();(我在测试的时候并没有出现这个javascript错误，不知道什么原因，只是造成死循环如果哪位知道的话可以在下面留言，解释一下)
      如果Gmail能做出这样的效果，我们也能做出来。思考了好长时间并且在网上读了一些相关文章，怎样使用没有浏览按钮来上传文件呢，最终发现，我们可以用两个页面来完成它；一个包含<iframe>标签的主页面，和一个iframe指向的页面。

     3.使用<iframe>标签
         正如我上面提到的，我们需要两个页面来完成这个技巧。
         主页面Main.aspx包含：
           1） 一个超级连接
           2） <iframe>标签，Src属性指向UpLoad.aspx
         在Upload.aspx页面包含
           1)      一个<input type=file>的Html Control(设为隐藏Visibility=hidden)
           2)      一个提交按钮(同上)
         当用户在Main.aspx中点击超链接的时候,我们必须调用在Upload.aspx中的<input type=file>控件的Onclick事件，让他显示文件选择对话框。为了提交这个表单，我们还必须调用在Upload.aspx中隐藏提交按钮的Onclick事件,这次就不会出现上次的那种Javascript错误，奇怪的你就会想，为什么同样的代码在有iframe标签的页面中就能正常运行，而在没有iframe标签的页面就不能运行呢？迷糊。。但它确实成功运行了！
        下面是Main.aspx的代码

<% @ Page Language = " C# "  AutoEventWireup = " true "  CodeFile = " Default2.aspx.cs "  Inherits = " temp_Default2 "   %>

<! 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  runat ="server" >
     < title > 上传文件 </ title >
     < script  type ="text/javascript" >
    function  Browse()
    {
         var  ifUpload;
        ifUpload  =  ifu.document.form1; 
        ifUpload.myFile.click();
        ifUpload.btnSubmit.click();
    }   
     </ script >
</ head >
< body  >
     < form  id ="form1"  runat ="server" >
     < div >
     < a  href ="#"  onclick ="javascript:Browse();" > 上传文件 </ a >
   < iframe  src ="Upload.aspx"  frameborder ="0"  id ="ifu"  name ="ifu" ></ iframe >  
     </ div >
     </ form >
</ body >
</ html >

       
        完整 Upload.aspx Html代码:

<% @ Page Language = " C# "  AutoEventWireup = " true "  CodeFile = " UpLoad.aspx.cs "  Inherits = " temp_UpLoad "   %>

<! 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  runat ="server" >
     < title > Ifrme页面 </ title >
     < script  type ="text/javascript" >
     function  SubmitForm()
    {
        document.form1.submit ();
    }
</ script >
< script  runat ="server" >
 protected  void  Page_Load(object sender, EventArgs e)
    {
         if  (Request.Files.Count  ==   1 )
        {
            myFile.PostedFile.SaveAs(Server.MapPath( " . " )  +
                 " //myUploadFile.txt " );
             this .lblMsg.Text  =   " Success " ;
        }
    }
</ script >

</ head >
< body >
     < form  id ="form1"  runat ="server" >
     < div >
     < input  type ="file"  runat ="server"  id ="myFile"  name ="myFile"  
          style ="visibility:hidden;"   />  
         < input  type ="button"  runat ="server"  id ="btnSubmit"  name ="btnSubmit"  
          onclick ="javascript:SubmitForm();"  style ="visibility:hidden;"   />  
         < br  />< asp:Label  ID ="lblMsg"  runat ="server"  ForeColor ="red"  
           Font-Size ="Medium"  Font-Bold ="true" ></ asp:Label >     
     </ div >
     </ form >
</ body >
</ html >

      如果你注意观察在Upload.aspx中的代码，你就会发现在页面中的input type=file控件和提交控件的Visibility属性被设置为隐藏，那么在IE中我们就不会看见这两个控件，相反。我们必须需要这两个隐藏控件来使一些文件从客户端上传到服务器端。

      4。工作原理
           正如你在上面的Main.aspx代码中看到的那样，只有一个名为”添加文件”的超级链接，他的Onclick事件调用客户端Brower函数,此函数中我们调用在Upload.aspx页面隐藏的input type=file的Onclick事件，一旦触发，用户就会看到“选择文件”对话框。如果我们选择一个文件并点击打开按钮，那么它就会回调在Brower函数中的ifUpload.btnSubmit.click();这个onClick事件将会执行包含在Upload.aspx中的SubmitForm函数。
            一旦在upload.aspx中的表单提交，就会执行服务器端代码上传文件。详细的代码在此文章结束的时候提供下载。
            但是这个方法只能运行在IE下，我在Firefox中测试过，并不能被执行。

   5。在线测试
        点击下面的链接上传一些文件到服务器，出于安全的考虑，只有文本文件能上传，请不要上传一些恶意的文件到服务器，我也给出一个链接来测试并下载你刚才上传的文件的正确性。

        上传文件

        下载你刚所上传的文件

   6。下载
         下载源代码
     
   7。摘要
       最后，希望你喜欢这篇文章，这个方法只能用于Web站点上上传文件，也只能在IE下运行，它可能在企业内部网是一种很好的解决方案。也适合其它的一些站点，但必须客户端的浏览器是IE.

注：我在firefox中用Gmail，他的添加附件链接,变成了input HtmlControl，我想它使用，也可能是这个方法。
   如果翻译的有出处，还请见谅！