美文网首页WEB前端程序开发
云盘开发利器elfinder

云盘开发利器elfinder

作者: 中科院_白乔 | 来源:发表于2018-04-18 10:19 被阅读12次

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

    image image

    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及子目录。。。  
              
        }  
    }  
    

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

    相关文章

      网友评论

        本文标题:云盘开发利器elfinder

        本文链接:https://www.haomeiwen.com/subject/lbxvkftx.html