在线文件管理模块功能及应用:

 

现代企业级开发中，在线文档管理是必不可少模块之一，本例所讲在线文档管理模块包括了文件上传到服务器上、文件浏览、重命名、移动、复制、删除、新建文件夹、压缩、解压缩、在线编辑等多种常用操作，适用于无纸化办公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