2011年12月17日 星期六

jQuery blockUI 簡單實現上傳讀取中的效果

因為我使用的是Visual Studio 2010 程式開發伺服器
所以Web.config裡
<system.web>
    <httpRuntime maxRequestLength="102400"></httpRuntime>
  </system.web>
設定最大上傳檔案大小約100MB,待會上傳大檔案時的讀取效果才會明顯
※如果是正式上線到IIS7,請參考:"真正" 修改 IIS 7 .NET上傳限制 (upload size limite)

==================================

<%@ 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>

==================================

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)));
        }
     }
}

==================================

下載demo 範例檔

下載另開視窗版本



原始文章出自於此

沒有留言:

張貼留言