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

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

 

 

 

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

 

 

 

 

部分代碼：

 

<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();                
               // 隱藏frame
               Sys.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 = '';
           //  顯示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);
       }
   
   </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