asp.net文件上傳帶進度條實現案例（多種風格）

2024-07-10 13:29:20

字體：大中小

來源：轉載

供稿：網友

這篇文章主要講解了asp.net文件上傳帶進度條實現案例，有不同風格的進度條，一定有一款最適合你的。

先飽飽眼福：

在之前的文章中也有類似帶進度條文件傳送的案例，大家可以翻閱之前的文章對知識點進行擴充。

部分代碼：

<%@ Page Language="C#" %>

<%@ Register Assembly="MattBerseth.WebControls.AJAX" Namespace="MattBerseth.WebControls.AJAX.Progress" TagPrefix="mb" %>

<!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>Untitled Page</title>

<link rel="Stylesheet" href="_assets/css/progress.css" mce_href="_assets/css/progress.css" />

<link rel="Stylesheet" href="_assets/css/upload.css" mce_href="_assets/css/upload.css" />

<mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> BODY{ font-family:Arial, Sans-Serif; font-size:12px;}

</style>

<mce:script type="text/C#" runat="server"></mce:script>

</head>

<body>

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

<asp:ScriptManager ID="scriptManager" runat="server" EnablePageMethods="true" />

<mce:script type="text/javascript"></mce:script>

<div>

<div class="upload">

<h3>文件上傳</h3>

<div>

<iframe id="uploadFrame" frameborder="0" scrolling="no" src="Upload.aspx" mce_src="Upload.aspx"></iframe>

<mb:ProgressControl ID="progress" runat="server" CssClass="lightblue" style="display:none" mce_style="display:none" Value="0" Mode="Manual" Speed=".4" Width="100%" />

<div>

<div id="status" class="info">請選擇要上傳的文件</div>

<div class="commands">

<input id="upload" type="button" value="上傳" />

</div>

</div>

</div>

</div>

</div>

</form>

</body>

</html>

upload.aspx:

//限制大小 1M

protected void Page_Load2(object sender, EventArgs e)

{

if (this.IsPostBack)

{

UploadInfo uploadInfo = this.Session["UploadInfo"] as UploadInfo;

if (uploadInfo == null)

{

// 讓父頁面知道無法處理上傳

const string js = "window.parent.onComplete('error', '無法上傳文件。請刷新頁面，然后再試一次);";

ScriptManager.RegisterStartupScript(this, typeof(upload_aspx), "progress", js, true);

}

else

{

// 讓服務端知道我們還沒有準備好..

uploadInfo.IsReady = false;

// 上傳驗證

if (this.fileUpload.PostedFile != null && this.fileUpload.PostedFile.ContentLength > 0

&& this.fileUpload.PostedFile.ContentLength < 1048576)// 限制1M

{

// 設置路徑

string path = this.Server.MapPath(@"Uploads");

string fileName = Path.GetFileName(this.fileUpload.PostedFile.FileName);

// 上傳信息

uploadInfo.ContentLength = this.fileUpload.PostedFile.ContentLength;

uploadInfo.FileName = fileName;

uploadInfo.UploadedLength = 0;

//文件存在初始化...

uploadInfo.IsReady = true;

//緩存

int bufferSize = 1;

byte[] buffer = new byte[bufferSize];

// 保存字節

using (FileStream fs = new FileStream(Path.Combine(path, fileName), FileMode.Create))

{

while (uploadInfo.UploadedLength < uploadInfo.ContentLength)

{

//從輸入流放進緩沖區

int bytes = this.fileUpload.PostedFile.InputStream.Read(buffer, 0, bufferSize);

// 字節寫入文件流

fs.Write(buffer, 0, bytes);

// 更新大小

uploadInfo.UploadedLength += bytes;

// 線程睡眠上傳就更慢這樣就可以看到進度條了

System.Threading.Thread.Sleep(100);

}

}

// 刪除.

File.Delete(Path.Combine(path, fileName));

// 讓父頁面知道已經處理上傳完畢

const string js = "window.parent.onComplete('success', '{0} 已成功上傳');";

ScriptManager.RegisterStartupScript(this, typeof(upload_aspx), "progress", string.Format(js, fileName), true);

}

else

{

if (this.fileUpload.PostedFile.ContentLength >= 1048576)//1M

{

const string js = "window.parent.onComplete('error', '超出上傳文件限制大小，請重新選擇');";

ScriptManager.RegisterStartupScript(this, typeof(upload_aspx), "progress", js, true);

}

else

{

const string js = "window.parent.onComplete('error', '上傳文件出錯');";

ScriptManager.RegisterStartupScript(this, typeof(upload_aspx), "progress", js, true);

}

}

uploadInfo.IsReady = false;

}

}

}

// 不限制大小

protected void Page_Load(object sender, EventArgs e)

{

if (this.IsPostBack)

{

UploadInfo uploadInfo = this.Session["UploadInfo"] as UploadInfo;

uploadInfo.IsReady = false;

if (this.fileUpload.PostedFile != null && this.fileUpload.PostedFile.ContentLength > 0)

{

string path = this.Server.MapPath(@"Uploads");

string fileName = Path.GetFileName(this.fileUpload.PostedFile.FileName);

uploadInfo.ContentLength = this.fileUpload.PostedFile.ContentLength;

uploadInfo.FileName = fileName;

uploadInfo.UploadedLength = 0;

uploadInfo.IsReady = true;

int bufferSize = 1;

byte[] buffer = new byte[bufferSize];

using (FileStream fs = new FileStream(Path.Combine(path, fileName), FileMode.Create))

{

while (uploadInfo.UploadedLength < uploadInfo.ContentLength)

{

int bytes = this.fileUpload.PostedFile.InputStream.Read(buffer, 0, bufferSize);

fs.Write(buffer, 0, bytes);

uploadInfo.UploadedLength += bytes;

}

}

const string js = "window.parent.onComplete('success', '{0} 已成功上傳');";

ScriptManager.RegisterStartupScript(this, typeof(upload_aspx), "progress", string.Format(js, fileName), true);

}

else

{

const string js = "window.parent.onComplete('error', '上傳文件出錯');";

ScriptManager.RegisterStartupScript(this, typeof(upload_aspx), "progress", js, true);

}

uploadInfo.IsReady = false;

}

}