添加链接
link管理
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接

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支持如下操作:

  • DUPLICATE
  • MKDIR
  • MKFILE
  • PARENT
  • PASTE
  • RENAME
  • SEARCH
  • 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" />
            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">
                    class="cn.bluejoe.elfinder.controller.executors.MissingCommandExecutor" />
            </property>
            <property name="map">
                    <entry key="tree">
                        <bean class="cn.bluejoe.elfinder.controller.executors.TreeCommandExecutor" />
                    </entry>
            </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 -->
                            <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>
                    </property>
                    <property name="volumes">
                            <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">
                                    <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及子目录。。。