文件上傳 帶進度條（多種風格）

文件上傳 帶進度條 多種風格 非常漂亮！

?

?

?

友好的提示 以及上傳驗證！

?

?

?

?

部分代碼：

?

<form id="form1" runat="server"><asp:ScriptManager ID="scriptManager" runat="server" EnablePageMethods="true" /><script type="text/javascript">var intervalID = 0;var progressBar;var fileUpload;var form;       // 進度條      function pageLoad(){           $addHandler($get('upload'), 'click', onUploadClick);progressBar = $find('progress');}// 注冊表單       function register(form, fileUpload){            this.form = form;this.fileUpload = fileUpload;}        //上傳驗證function onUploadClick() {        var vaild = fileUpload.value.length > 0;if(vaild){              $get('upload').disabled = 'disabled';             updateMessage('info', '初始化上傳...');                //提交上傳form.submit();                // 隱藏frameSys.UI.DomElement.addCssClass($get('uploadFrame'), 'hidden');// 0開始顯示進度條progressBar.set_percentage(0);progressBar.show();           // 上傳過程intervalID = window.setInterval(function(){PageMethods.GetUploadStatus(function(result){if(result){//  更新進度條為新值progressBar.set_percentage(result.percentComplete);//更新信息updateMessage('info', result.message);if(result == 100){// 自動消失window.clearInterval(intervalID);                        }}});}, 500);                }else{onComplete('error', '您必需選擇一個文件');}}       function onComplete(type, msg){// 自動消失window.clearInterval(intervalID);// 顯示消息updateMessage(type, msg);// 隱藏進度條progressBar.hide();progressBar.set_percentage(0);// 重新啟用按鈕$get('upload').disabled = '';//  顯示frameSys.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);}</script><div><div class="upload"><h3>文件上傳</h3><div><iframe id="uploadFrame" frameborder="0" scrolling="no" src="Upload.aspx"></iframe><mb:ProgressControl ID="progress" runat="server" CssClass="lightblue" 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>

?

?

?

?

?

?

?

?

?

?

?

?

upload.aspx:

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

?

代碼就不貼完了 直接打包下載吧！

有關上傳的都歸類在這里了：http://www.cnblogs.com/zengxiangzhan/category/269831.html