elFinder 是一个基于 Web 的文件管理器,灵感来自 Mac OS X 的 Finder 程序。

云盘开发利器elfinder

云盘开发利器elfinder

elFinder 的安装方法很简单,按照以下几个步骤即可:

1. 引入 jQuery 和 jQuery UI 包

[html] view plain copy
  1. <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>  
  2. <script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript" charset="utf-8"></script>  
  3. <link rel="stylesheet" href="js/ui-themes/base/ui.all.css" type="text/css" media="screen" charset="utf-8">  

2. 引入 elFinder 包

[html] view plain copy
  1. <script src="js/elfinder.min.js" type="text/javascript" charset="utf-8"></script>  
  2. <link rel="stylesheet" href="css/elfinder.css" type="text/css" media="screen" charset="utf-8">  


3. 引入本地化包

[html] view plain copy
  1. <script src="js/i18n/elfinder.ru.js" type="text/javascript" charset="utf-8"></script>  

4. 初始化服务器端的连接器

[html] view plain copy
  1. <script type="text/javascript" charset="utf-8">  
  2.    $().ready({  
  3.      $('#my-div').elfinder({  
  4.        url : 'connectors/php/connector.php',  
  5.        lang : 'ru'  
  6.      })  
  7.    })  
  8. </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系统相集成。

[html] view plain copy
  1. <servlet>  
  2.     <servlet-name>elfinder</servlet-name>  
  3.     <servlet-class>org.springframework.web.servlet.DispatcherServlet  
  4.     </servlet-class>  
  5. </servlet>  
  6.   
  7. <servlet-mapping>  
  8.     <servlet-name>elfinder</servlet-name>  
  9.     <url-pattern>/elfinder-servlet/*</url-pattern>  
  10. </servlet-mapping>  

对应的spring配置文件:

[html] view plain copy
  1. <!-- find appropriate  command executor for given command-->  
  2. <bean id="commandExecutorFactory"  
  3.     class="cn.bluejoe.elfinder.controller.executor.DefaultCommandExecutorFactory">  
  4.     <property name="classNamePattern"  
  5.         value="cn.bluejoe.elfinder.controller.executors.%sCommandExecutor" />  
  6.     <property name="map">  
  7.         <map>  
  8.         <!--   
  9.             <entry key="tree">  
  10.                 <bean class="cn.bluejoe.elfinder.controller.executors.TreeCommandExecutor" />  
  11.             </entry>  
  12.         -->  
  13.         </map>  
  14.     </property>  
  15. </bean>  
  16.   
  17. <!-- FsService is often retrieved from HttpRequest -->  
  18. <!-- while a static FsService is defined here -->  
  19. <bean id="fsServiceFactory" class="cn.bluejoe.elfinder.impl.StaticFsServiceFactory">  
  20.     <property name="fsService">  
  21.         <bean class="cn.bluejoe.elfinder.impl.DefaultFsService">  
  22.             <property name="serviceConfig">  
  23.                 <bean class="cn.bluejoe.elfinder.impl.DefaultFsServiceConfig">  
  24.                     <property name="tmbWidth" value="80" />  
  25.                 </bean>  
  26.             </property>  
  27.             <property name="volumeMap">  
  28.                 <!-- two volumes are mounted here -->  
  29.                 <map>  
  30.                     <entry key="A">  
  31.                         <bean class="cn.bluejoe.elfinder.localfs.LocalFsVolume">  
  32.                             <property name="name" value="MyFiles" />  
  33.                             <property name="rootDir" value="/tmp/a" />  
  34.                         </bean>  
  35.                     </entry>  
  36.                     <entry key="B">  
  37.                         <bean class="cn.bluejoe.elfinder.localfs.LocalFsVolume">  
  38.                             <property name="name" value="Shared" />  
  39.                             <property name="rootDir" value="/tmp/b" />  
  40.                         </bean>  
  41.                     </entry>  
  42.                 </map>  
  43.             </property>  
  44.             <property name="securityChecker">  
  45.                 <bean class="cn.bluejoe.elfinder.impl.FsSecurityCheckerChain">  
  46.                     <property name="filterMappings">  
  47.                         <list>  
  48.                             <bean class="cn.bluejoe.elfinder.impl.FsSecurityCheckFilterMapping">  
  49.                                 <property name="pattern" value="A_.*" />  
  50.                                 <property name="checker">  
  51.                                     <bean class="cn.bluejoe.elfinder.impl.FsSecurityCheckForAll">  
  52.                                         <property name="readable" value="true" />  
  53.                                         <property name="writable" value="true" />  
  54.                                     </bean>  
  55.                                 </property>  
  56.                             </bean>  
  57.                             <bean class="cn.bluejoe.elfinder.impl.FsSecurityCheckFilterMapping">  
  58.                                 <property name="pattern" value="B_.*" />  
  59.                                 <property name="checker">  
  60.                                     <bean class="cn.bluejoe.elfinder.impl.FsSecurityCheckForAll">  
  61.                                         <property name="readable" value="true" />  
  62.                                         <property name="writable" value="false" />  
  63.                                     </bean>  
  64.                                 </property>  
  65.                             </bean>  
  66.                         </list>  
  67.                     </property>  
  68.                 </bean>  
  69.             </property>  
  70.         </bean>  
  71.     </property>  
  72. </bean>  

这里面展示了一个包含了2个卷的文件目录结构,分别映射到/tmp/a和/tmp/b目录下。

但一般云盘系统可能不会严格对应于某个静态的目录,甚至会根据用户的账号来动态构造目录结构。

elfinder-2.x-servlet充分考虑到了这一点,提供了FsServiceFactory接口,用以实现这种动态的需求:

[java] view plain copy
  1. public class MyServiceFactory implements FsServiceFactory  
  2. {  
  3.     FsService getFileService(HttpServletRequest request, ServletContext servletContext)  
  4.     {  
  5.         //获取到用户名  
  6.         String username = request.getUserPrincipal().getName();  
  7.         //读取文件资源表  
  8.         //构造FsVolume及子目录。。。  
  9.           
  10.     }  
  11. }  

更多帮助信息参见https://github.com/bluejoe2008/elfinder-2.x-servlet

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2022-02-07
  • 2021-06-07
  • 2021-11-15
  • 2022-01-31
  • 2021-11-27
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2021-05-08
  • 2022-01-06
  • 2021-10-19
  • 2021-05-29
  • 2021-08-29
  • 2022-02-08
相关资源
相似解决方案