[ASP.net WebForm] 利用jQuery blockUI 簡單實現上傳讀取中的效果

[ASP.net WebForm] 利用jQuery blockUI 簡單實現上傳讀取中的效果

因為我使用的是Visual Studio 2010 程式開發伺服器

所以Web.config裡


<system.web>
    <httpRuntime maxRequestLength="102400"></httpRuntime>
  </system.web>

設定最大上傳檔案大小約100MB,待會上傳大檔案時的讀取效果才會明顯

※如果是正式上線到IIS7,請參考:"真正" 修改 IIS 7 .NET上傳限制 (upload size limite)

 

接下來

.aspx


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

<!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>
    <!--引用jQuery核心函式庫-->
    <script src="Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
    <!--引用jQuery blockUI套件-->
    <script src="Scripts/jquery.blockUI.js" type="text/javascript"></script>
    <%--jQuery blockUI官網:http://jquery.malsup.com/block/#--%>
    <script type="text/javascript">
        function showBlockUI() {

            //顯示上傳中的圖片
            $.blockUI({ message: '<img src="http://butyshop.com/images/loading.gif" />' });


            $("#btn_upload").click(); //執行上傳

            //$.unblockUI();/*因為會postback頁面刷新,所以有沒有unblockUI沒差*/
        }
    
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:FileUpload runat="server" ID="fu_upload" />
    <input type="button" value="點選上傳檔案" onclick="showBlockUI();" />
    <!--隱藏Button(Server Control)--> 
    <div style="display:none;"> 
          <asp:Button Text="text" ID="btn_upload" runat="server"   onclick="btn_upload_Click" /> 
    </div> 
    </form> 
</body>
</html>

 

.aspx.cs

 


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;

public partial class B : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
                
            
         
        }
 
    }
    //Server Control Button 的Click事件
    protected void btn_upload_Click(object sender, EventArgs e)
    {
        if (fu_upload.HasFile)
        {
            string newFileName = Guid.NewGuid().ToString();//產生不重覆的檔名
            fu_upload.SaveAs(Server.MapPath("~/" + newFileName + System.IO.Path.GetExtension(fu_upload.FileName)));
        }

        

        
    }
}

執行結果:

image

點選上傳後

image

等Button Postback完後,blockUI效果也跟著消失

image

確認檔案也有上傳到Server網站根目錄底下

image

 

本次Demo檔下載

2011.12.16 追記

好奇心再試如果上傳畫面是另開視窗比較小的畫面


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

<!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 showUploadFile() {


            window.open("uploadFile.aspx", "_blank", "width= 600,height=300");
        
        }
    
    </script>
</head>
<body>
    <form id="form1" runat="server">
    
      <input type="button" value="點選另開視窗" onclick="showUploadFile();" />
    </form>
</body>
</html>

 

在上傳的時候,blockUI效果的圖片因為太大,所以圖片位置跑掉了

針對這種情況大概要換張小圖,或改成文字來顯示”上傳中……”


    <script type="text/javascript">
        function showBlockUI() {

            //顯示上傳中的圖片
            $.blockUI({ message: '<h2>上傳中......</h2>' });


            $("#btn_upload").click(); //執行上傳

            //$.unblockUI();/*因為會postback頁面刷新,所以有沒有unblockUI沒差*/
        }
    
    </script>

 

 

另外上傳完成要出現alert訊息要加在Code-Behind的程式碼中,若加在上述的<script>區段,會變成按下Button馬上跳出上傳完成的訊息,檔案才開始上傳這種奇怪現象


    //Server Control Button 的Click事件
    protected void btn_upload_Click(object sender, EventArgs e)
    {
        if (fu_upload.HasFile)
        {
            string newFileName = Guid.NewGuid().ToString();//產生不重覆的檔名
            fu_upload.SaveAs(Server.MapPath("~/" + newFileName + System.IO.Path.GetExtension(fu_upload.FileName)));

            //上傳完成,提示訊息
            ClientScript.RegisterStartupScript(typeof(Page), "上傳完成", "alert('上傳完成');", true);
        }

    }

執行效果:

image

image

 

再附上2011.12.16 的測試檔案

2011.12.18 追記,因為IE9在開啟子視窗時候沒有讀取狀態列,第二個技巧要稍微記下來了

2012.02.04 延伸閱讀其他文章:

jQuery Update Panel Progress Using jQuery BlockUI Plugin 

放在jQuery Block UI容器裡的UpdatePanel失效,無法更新的解決辦法(JQuery BlockUI with UpdatePanel Viewstate Issue)