elFinder 是一个基于 Web 的文件管理器,灵感来自 Mac OS X 的 Finder 程序。
elFinder 的安装方法很简单,按照以下几个步骤即可:
1. 引入 jQuery 和 jQuery UI 包
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="js/ui-themes/base/ui.all.css" type="text/css" media="screen" charset="utf-8">
2. 引入 elFinder 包
<script src="js/elfinder.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/elfinder.css" type="text/css" media="screen" charset="utf-8">
3. 引入本地化包
<script src="js/i18n/elfinder.ru.js" type="text/javascript" charset="utf-8"></script>
4. 初始化服务器端的连接器
<script type="text/javascript" charset="utf-8">
$().ready({
$('#my-div').elfinder({
url : 'connectors/php/connector.php',
lang : 'ru'
})
})
</script>
从这段代码可以看出,elfinder主要提供的是一个基于jquery的管理前端,当用户执行“浏览目录”“查看文件”“删除文件”等操作的时候,实际上,前端js会链接到后端的对应操作模块(类似于connector.php?command=dir)。
目前已经有一些较成熟的elfinder后端,包括PHP、Java、.NET等不同版本的。这里介绍一款基于Java-Servlet的后端:elfinder-2.x-servlet,该项目完全开源,地址:https://github.com/bluejoe2008/elfinder-2.x-servlet
elfinder-2.x-servlet支持如下操作:
- DIM
- DUPLICATE
- FILE
- GET
- LS
- MKDIR
- MKFILE
- OPEN
- PARENT
- PASTE
- PUT
- RENAME
- RM
- SEARCH
- SIZE
- TMB
- TREE
- UPLOAD
elfinder-2.x-servlet基于spring框架开发,因此也很容易与java web系统相集成。
<servlet>
<servlet-name>elfinder</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet
</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>elfinder</servlet-name>
<url-pattern>/elfinder-servlet/*</url-pattern>
</servlet-mapping>
对应的spring配置文件:
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:p="http://www.springframework.org/schema/p"
xmlns:context="http://www.springframework.org/schema/context"
xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-3.0.xsd
http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-3.0.xsd
http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsd">
<context:annotation-config />
<context:component-scan base-package="cn.bluejoe.elfinder.controller" />
<bean
class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter" />
<!-- find appropriate command executor for given command -->
<bean id="commandExecutorFactory"
class="cn.bluejoe.elfinder.controller.executor.DefaultCommandExecutorFactory">
<property name="classNamePattern"
value="cn.bluejoe.elfinder.controller.executors.%sCommandExecutor" />
<property name="fallbackCommand">
<bean
class="cn.bluejoe.elfinder.controller.executors.MissingCommandExecutor" />
</property>
<property name="map">
<map>
<!--
<entry key="tree">
<bean class="cn.bluejoe.elfinder.controller.executors.TreeCommandExecutor" />
</entry>
-->
</map>
</property>
</bean>
<!-- FsService is often retrieved from HttpRequest -->
<!-- while a static FsService is defined here -->
<bean id="fsServiceFactory" class="cn.bluejoe.elfinder.impl.StaticFsServiceFactory">
<property name="fsService">
<bean class="cn.bluejoe.elfinder.impl.DefaultFsService">
<property name="serviceConfig">
<bean class="cn.bluejoe.elfinder.impl.DefaultFsServiceConfig">
<property name="tmbWidth" value="80" />
</bean>
</property>
<property name="volumeMap">
<!-- two volumes are mounted here -->
<map>
<entry key="A">
<bean class="cn.bluejoe.elfinder.localfs.LocalFsVolume">
<property name="name" value="MyFiles" />
<property name="rootDir" value="/tmp/a" />
</bean>
</entry>
<entry key="B">
<bean class="cn.bluejoe.elfinder.localfs.LocalFsVolume">
<property name="name" value="Shared" />
<property name="rootDir" value="/tmp/b" />
</bean>
</entry>
</map>
</property>
<!--
<property name="volumes">
<list>
<bean class="cn.bluejoe.elfinder.localfs.LocalFsVolume">
<property name="name" value="MyFiles" />
<property name="rootDir" value="/tmp/a" />
</bean>
<bean class="cn.bluejoe.elfinder.localfs.LocalFsVolume">
<property name="name" value="Shared" />
<property name="rootDir" value="/tmp/b" />
</bean>
</list>
</property>
-->
<property name="securityChecker">
<bean class="cn.bluejoe.elfinder.impl.FsSecurityCheckerChain">
<property name="filterMappings">
<list>
<bean class="cn.bluejoe.elfinder.impl.FsSecurityCheckFilterMapping">
<property name="pattern" value="A_.*" />
<property name="checker">
<bean class="cn.bluejoe.elfinder.impl.FsSecurityCheckForAll">
<property name="readable" value="true" />
<property name="writable" value="true" />
</bean>
</property>
</bean>
<bean class="cn.bluejoe.elfinder.impl.FsSecurityCheckFilterMapping">
<property name="pattern" value="B_.*" />
<property name="checker">
<bean class="cn.bluejoe.elfinder.impl.FsSecurityCheckForAll">
<property name="readable" value="true" />
<property name="writable" value="false" />
</bean>
</property>
</bean>
</list>
</property>
</bean>
</property>
</bean>
</property>
</bean>
</beans>
这里面展示了一个包含了2个卷的文件目录结构,分别映射到/tmp/a和/tmp/b目录下。
但一般云盘系统可能不会严格对应于某个静态的目录,甚至会根据用户的账号来动态构造目录结构。
elfinder-2.x-servlet充分考虑到了这一点,提供了FsServiceFactory接口,用以实现这种动态的需求:
public class MyServiceFactory implements FsServiceFactory
{
FsService getFileService(HttpServletRequest request, ServletContext servletContext)
{
//获取到用户名
String username = request.getUserPrincipal().getName();
//读取文件资源表
//构造FsVolume及子目录。。。
}
}