使用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代碼中看到的那樣，只有一個名為”添加檔案”的超級連結，他的