asp.net文件上傳帶進(jìn)度條實(shí)現(xiàn)案例(多種風(fēng)格)
先飽飽眼福:
在之前的文章中也有類似帶進(jìn)度條文件傳送的案例,大家可以翻閱之前的文章對(duì)知識(shí)點(diǎn)進(jìn)行擴(kuò)充。
部分代碼:
<%@ 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"><!-- BODY{ font-family:Arial, Sans-Serif; font-size:12px;} --></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"><!-- protected void Page_Load(object sender, EventArgs args) { if (!this.IsPostBack) { this.Session["UploadInfo"] = new UploadInfo { IsReady = false }; } } /// <summary> /// /// </summary> [System.Web.Services.WebMethod] [System.Web.Script.Services.ScriptMethod] public static object GetUploadStatus() { //獲取文件長(zhǎng)度 UploadInfo info = HttpContext.Current.Session["UploadInfo"] as UploadInfo; if (info != null && info.IsReady) { int soFar = info.UploadedLength; int total = info.ContentLength; int percentComplete = (int)Math.Ceiling((double)soFar / (double)total * 100); string message = string.Format("上傳 {0} ... {1} of {2} 字節(jié)", info.FileName, soFar, total); // 返回百分比 return new { percentComplete = percentComplete, message = message }; } // 還沒有準(zhǔn)備好... return null; } // --></mce:script> </head> <body> <form id="form1" runat="server"> <asp:ScriptManager ID="scriptManager" runat="server" EnablePageMethods="true" /> <mce:script type="text/javascript"><!-- var intervalID = 0; var progressBar; var fileUpload; var form; // 進(jìn)度條 function pageLoad(){ $addHandler($get('upload'), 'click', onUploadClick); progressBar = $find('progress'); } // 注冊(cè)表單 function register(form, fileUpload){ this.form = form; this.fileUpload = fileUpload; } //上傳驗(yàn)證 function onUploadClick() { var vaild = fileUpload.value.length > 0; if(vaild){ $get('upload').disabled = 'disabled'; updateMessage('info', '初始化上傳...'); //提交上傳 form.submit(); // 隱藏frame Sys.UI.DomElement.addCssClass($get('uploadFrame'), 'hidden'); // 0開始顯示進(jìn)度條 progressBar.set_percentage(0); progressBar.show(); // 上傳過程 intervalID = window.setInterval(function(){ PageMethods.GetUploadStatus(function(result){ if(result){ // 更新進(jìn)度條為新值 progressBar.set_percentage(result.percentComplete); //更新信息 updateMessage('info', result.message); if(result == 100){ // 自動(dòng)消失 window.clearInterval(intervalID); } } }); }, 500); } else{ onComplete('error', '您必需選擇一個(gè)文件'); } } function onComplete(type, msg){ // 自動(dòng)消失 window.clearInterval(intervalID); // 顯示消息 updateMessage(type, msg); // 隱藏進(jìn)度條 progressBar.hide(); progressBar.set_percentage(0); // 重新啟用按鈕 $get('upload').disabled = ''; // 顯示frame Sys.UI.DomElement.removeCssClass($get('uploadFrame'), 'hidden'); } function updateMessage(type, value){ var status = $get('status'); status.innerHTML = value; // 移除樣式 status.className = ''; Sys.UI.DomElement.addCssClass(status, type); } // --></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">請(qǐng)選擇要上傳的文件</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) { // 讓父頁(yè)面知道無法處理上傳 const string js = "window.parent.onComplete('error', '無法上傳文件。請(qǐng)刷新頁(yè)面,然后再試一次);"; ScriptManager.RegisterStartupScript(this, typeof(upload_aspx), "progress", js, true); } else { // 讓服務(wù)端知道我們還沒有準(zhǔn)備好.. uploadInfo.IsReady = false; // 上傳驗(yàn)證 if (this.fileUpload.PostedFile != null && this.fileUpload.PostedFile.ContentLength > 0 && this.fileUpload.PostedFile.ContentLength < 1048576)// 限制1M { // 設(shè)置路徑 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]; // 保存字節(jié) using (FileStream fs = new FileStream(Path.Combine(path, fileName), FileMode.Create)) { while (uploadInfo.UploadedLength < uploadInfo.ContentLength) { //從輸入流放進(jìn)緩沖區(qū) int bytes = this.fileUpload.PostedFile.InputStream.Read(buffer, 0, bufferSize); // 字節(jié)寫入文件流 fs.Write(buffer, 0, bytes); // 更新大小 uploadInfo.UploadedLength += bytes; // 線程睡眠 上傳就更慢 這樣就可以看到進(jìn)度條了 System.Threading.Thread.Sleep(100); } } // 刪除. File.Delete(Path.Combine(path, fileName)); // 讓父頁(yè)面知道已經(jīng)處理上傳完畢 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', '超出上傳文件限制大小,請(qǐng)重新選擇');"; ScriptManager.RegisterStartupScript(this, typeof(upload_aspx), "progress", js, true); } else { const string js = "window.parent.onComplete('error', '上傳文件出錯(cuò)');"; 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', '上傳文件出錯(cuò)');"; ScriptManager.RegisterStartupScript(this, typeof(upload_aspx), "progress", js, true); } uploadInfo.IsReady = false; } }
代碼就不貼完了,直接上干貨,親,這可是免郵的哦!下載地址
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Asp.net基于ajax和jquery-ui實(shí)現(xiàn)進(jìn)度條
- ASP.NET實(shí)現(xiàn)進(jìn)度條效果
- asp.net mvc 實(shí)現(xiàn)文件上傳帶進(jìn)度條的思路與方法
- asp.net單文件帶進(jìn)度條上傳的解決方案
- Asp.Net 無刷新文件上傳并顯示進(jìn)度條的實(shí)現(xiàn)方法及思路
- asp.net 生成靜態(tài)頁(yè)時(shí)的進(jìn)度條顯示
- 利用Asp.Net回調(diào)機(jī)制實(shí)現(xiàn)進(jìn)度條
- ASP.NET技巧:教你制做Web實(shí)時(shí)進(jìn)度條
- ASP.NET?MVC使用jQuery?ui的progressbar實(shí)現(xiàn)進(jìn)度條
相關(guān)文章
ASP.NET XmlHttp跨域訪問實(shí)現(xiàn)代碼
最近項(xiàng)目需要實(shí)現(xiàn)XmlHttp的POST方法到另一服務(wù)器上的頁(yè)面進(jìn)行數(shù)據(jù)的更新,可是IE會(huì)提出“該頁(yè)正在訪問其控制范圍之外的信息,是否繼續(xù)?”等警告信息,而在其他瀏覽器上直接禁止掉,GOOGLE一下原來是XmlHttp的跨域訪問問題,找了很多資料,說是提供很多解決方案,可是都沒有用處。2008-11-11使用grpcui測(cè)試ASP.NET core的gRPC服務(wù)
這篇文章介紹了使用grpcui測(cè)試ASP.NET core gRPC服務(wù)的方法,文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-07-07動(dòng)態(tài)向頁(yè)面添加控件和使用正則表達(dá)式的代碼
動(dòng)態(tài)向頁(yè)面添加控件和使用正則表達(dá)式的實(shí)現(xiàn)代碼。2009-08-08ASP.NET MVC5驗(yàn)證系列之服務(wù)端驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了ASP.NET MVC5驗(yàn)證系列之服務(wù)端驗(yàn)證,使用兩種方法來驗(yàn)證數(shù)據(jù)的合法性,手動(dòng)驗(yàn)證的方式和數(shù)據(jù)注解來進(jìn)行服務(wù)端驗(yàn)證,感興趣的小伙伴們可以參考一下2016-07-07ASP.NET中母版頁(yè)和shtml實(shí)例入門
這篇文章主要介紹了ASP.NET中母版頁(yè)和shtml,較為簡(jiǎn)單的分析了asp.net的母版頁(yè)和shtml相關(guān)用法,需要的朋友可以參考下2015-06-06一個(gè)ASP.Net下的WebShell實(shí)例
一個(gè)ASP.Net下的WebShell,主要完成cmd命令。一般的服務(wù)器設(shè)置,asp.net用戶的權(quán)限都比較高。如果asp的webshell無法執(zhí)行,可能asp.net的可以執(zhí)行。2013-07-07C#數(shù)據(jù)綁定控件中的DataSource屬性淺談
使用該屬性指定用來填充Repeater控件的數(shù)據(jù)源。DataSource可以是任何System.Collections.IEnumerable對(duì)象, 如用于訪問數(shù)據(jù)庫(kù)的System.Data.DataView、System.Collections.ArrayList、System.Collections.Hashtable、數(shù)組或IListSource對(duì)象2013-02-02Community Server專題二:體系結(jié)構(gòu)
Community Server專題二:體系結(jié)構(gòu)...2007-03-03ASP.NET Core 2.0中Razor頁(yè)面禁用防偽令牌驗(yàn)證
在這篇短文中,我將向您介紹如何ASP.NET Core2.0 Razor頁(yè)面中禁用防偽令牌驗(yàn)證,對(duì)此有興趣的朋友參考學(xué)習(xí)下吧。2018-01-01