WEB前端程序开发

云盘开发利器elfinder

2018-04-18  本文已影响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支持如下操作:

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

上一篇下一篇

猜你喜欢

热点阅读