[ASP.NET]用簡單的方式來配合UpdatePanel來跟FileUpload做非同步上傳

2009-09-11

31622
0
ASP.NET(C#)

應該會有許多網友會有這樣的這樣的問題~把FileUpload放到UpdatePanel時，發現讀取不出來，是因為UpdatePanel不支援FileUpload，有的書會教說把UpdatePanel改為同步Postback機制，那這樣好像不是我們要的效果吧？因為經常在編輯資料的時候某一個欄位就是需要上傳圖片或是上傳檔案的，檔案如果很大的話，使用者在輸入其他的資料時，可能會被閃爍的畫面嚇了一跳，心臟比較無力的使用者可能會嚇死吧(有點誇大= =)。那麼今天要講的就是要如何配合UpdatePanel來跟FileUpload做非同步上傳，這樣子的話網頁就不會有閃爍的狀況發生，而且上傳完成後會以訊息的方式彈出提醒使用者檔案上傳完畢。

我們今天先準備兩個檔案，一個是做為主網頁，另一個是iframe網頁也就是放置FileUpload控制項的地方

1.先製作主網頁Default.aspx

我們需要一個function來取得我們在iframe回傳過來的資訊，所以在js中有一個callBack(檔名,放置檔名的文字框ID)裡面也就只很簡單的將回傳的檔名放到文字框內，在彈跳出視窗說「上傳完成!」

再來就是拉ScriptManager、UpdatePanel的控制項，而在UpdatePanel中我們又放了iframe跟一個TextBox

ifame是讓我們來顯示上傳控制項的網頁

TextBox是用來顯示回傳的檔名

在下面的html之中會有看到來源網頁是怎麼會那麼長，是因為我一個網頁可能有好多個上傳欄位需要這個控制項所以我帶一個參數回去給fileloadpage.aspx方法回傳的欄位都是正確的位置


Default.aspx

<head runat="server">
    <title></title>
    <script type="text/javascript">
    
function callBack(fileName, box) {

    document.getElementById(box).value = fileName;
    alert('上傳完成!');

}
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <br />
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <iframe id="I1" frameborder="0" name="I1"  height="32px"  src="fileloadpage.aspx?box=tb_file1"></iframe>
                <br />
                檔案名稱：<asp:TextBox ID="tb_file1" runat="server"></asp:TextBox>
            </ContentTemplate>
        </asp:UpdatePanel>
    
    </div>
    </form>
</body>
</html>

2.再來就是Fileloadpage.aspx了

我們很簡單的建立一個Fileupload跟Button的控制項

Fileloadpage.aspx

   <form id="form1" runat="server">

    <div>

        <asp:FileUpload ID="FileUpload1" runat="server" />

        <asp:Button ID="btn_Upload" runat="server"

            Text="上傳" onclick="btn_Upload_Click" />

    </div>

    </form>

3.在來就是寫一下小小的程式

Fileloadpage.aspx.cs

public partial class fileloadpage : System.Web.UI.Page

        string box = "";

        protected void Page_Load(object sender, EventArgs e)

            //取得參數box

            box = Request.QueryString["box"];

        protected void btn_Upload_Click(object sender, EventArgs e)

                //上傳檔案........

                //呼叫Default的js

                Response.Write("<script>window.top.callBack('" + FileUpload1.FileName + "','" + box + "');</script>");

回首頁