Web文件管理器 elfinder-彩龙社区

 最近接到一个需求，客户需要能在web页面进行文件管理，在需求调研时发现一个很好用的开源web文件管理器插件 elfinder，功能比较完善，社区也很活跃，方便二次开发，源码在GitHub上有将近3K的star，而且每周都有更新提交。

 

        实际效果如下图所示：

        下面简要介绍下使用方法。首先从官网下载压缩包，目前最近的版本是elFinder-2.1.39，作者应该是php开发，所以压缩包里面带了一个完整的php示例，解压之后只需要把目录下的elfinder文件夹拷贝到项目里就行。

        由于elfinder只是一个前端样式框架，所以要想应用到项目中，还需要自己根据api开发后台接口，在GitHub上作者除了php外，还给了java和python两种后端实现demo，但是都已经五六年没有更新过。这里java环境推荐使用国内一个用户自己实现的后端 elfinder-2.x-servlet，虽然star比价少，但是好在作者持续更新，jar包作者已经放到中央仓库，只需添加下面的依赖就行

<dependency>
 <groupId>com.github.bluejoe2008</groupId>
 <artifactId>elfinder-servlet-2</artifactId>
 <version>1.2</version>
 <classifier>classes</classifier>
</dependency>

        后续就使用elfin-2.x-servlet作为后端支持继续介绍。使用elfinder-servlet-2需要新建一个类实现 FsServiceFactory 接口，实现其中的唯一的方法，这个方法主要用来配置个性文件目录

FsService getFileService(HttpServletRequest request, ServletContext servletContext);

下面是一个完整示例：

package cn.kunming.iss.front.controller;

import cn.bluejoe.elfinder.controller.ConnectorController;
import cn.bluejoe.elfinder.controller.executor.CommandExecutorFactory;
import cn.bluejoe.elfinder.controller.executor.DefaultCommandExecutorFactory;
import cn.bluejoe.elfinder.controller.executors.MissingCommandExecutor;
import cn.bluejoe.elfinder.impl.DefaultFsService;
import cn.bluejoe.elfinder.impl.DefaultFsServiceConfig;
import cn.bluejoe.elfinder.impl.FsSecurityCheckForAll;
import cn.bluejoe.elfinder.impl.StaticFsServiceFactory;
import cn.bluejoe.elfinder.localfs.LocalFsVolume;
import cn.bluejoe.elfinder.service.FsService;
import cn.bluejoe.elfinder.service.FsServiceFactory;
import cn.kunming.iss.core.constants.Constants;
import cn.kunming.iss.core.shiro.SimpleUser;
import cn.kunming.iss.core.web.model.UserV;
import org.apache.shiro.SecurityUtils;

import javax.servlet.ServletContext;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.File;

public class MyServiceFactory implements FsServiceFactory {

    //core member of this Servlet
    ConnectorController _connectorController;

    /**
     * create a command executor factory
     *
     * @return
     */
    protected CommandExecutorFactory createCommandExecutorFactory()
    {
        DefaultCommandExecutorFactory defaultCommandExecutorFactory = new DefaultCommandExecutorFactory();
        defaultCommandExecutorFactory
                .setClassNamePattern("cn.bluejoe.elfinder.controller.executors.%sCommandExecutor");
        defaultCommandExecutorFactory
                .setFallbackCommand(new MissingCommandExecutor());
        return defaultCommandExecutorFactory;
    }

    /**
     * create a connector controller
     *
     * @return
     */
    protected ConnectorController createConnectorController(HttpServletRequest request)
    {
        ConnectorController connectorController = new ConnectorController();

        connectorController
                .setCommandExecutorFactory(createCommandExecutorFactory());
        connectorController.setFsServiceFactory(createServiceFactory(request));

        return connectorController;
    }


    private LocalFsVolume createLocalFsVolume(String name, File rootDir)
    {
        LocalFsVolume localFsVolume = new LocalFsVolume();
        localFsVolume.setName(name);
        localFsVolume.setRootDir(rootDir);
        return localFsVolume;
    }

    /**
     * create a service factory
     *
     * @return
     */
    protected StaticFsServiceFactory createServiceFactory(HttpServletRequest request)
    {
        StaticFsServiceFactory staticFsServiceFactory = new StaticFsServiceFactory();
        FsService fsService = getFileService(request,request.getServletContext());

        staticFsServiceFactory.setFsService(fsService);
        return staticFsServiceFactory;
    }


    public void initConnectorServlet(HttpServletRequest request,HttpServletResponse resp) throws Exception
    {
        _connectorController = createConnectorController(request);
        _connectorController.connector(request, resp);
    }

    @Override
    public FsService getFileService(HttpServletRequest request, ServletContext servletContext) {

        DefaultFsService fsService = new DefaultFsService();
        fsService.setSecurityChecker(new FsSecurityCheckForAll());

        DefaultFsServiceConfig serviceConfig = new DefaultFsServiceConfig();
        serviceConfig.setTmbWidth(80);

        fsService.setServiceConfig(serviceConfig);

        UserV v = null;
        SimpleUser u = ((SimpleUser) SecurityUtils.getSubject().getPrincipal());
        if(u==null) {
            v = getSessionAttr(request,Constants.WEIXIN_USER);
        }else {
            v = u.getUser();
        }

        String userName = v.getStr("user_cn_name");

        fsService.addVolume("A",
                createLocalFsVolume(userName, new File("/tmp/"+userName)));
        fsService.addVolume("B",
                createLocalFsVolume("Shared", new File("/tmp/share/"+userName)));

        return fsService;
    }


    public <T> T getSessionAttr(HttpServletRequest request,String key) {
        HttpSession session = request.getSession(false);
        return session != null ? (T)session.getAttribute(key) : null;
    }

}

        控制层收到请求后，实例化 MyServiceFactory 就可以完成目录连接，示例如下：

package cn.kunming.iss.front.controller;

import cn.kunming.iss.core.controller.base.BaseController;
import com.jfinal.aop.Clear;
import com.jfinal.ext.route.ControllerBind;

@Clear
@ControllerBind(controllerKey = "/elfinder-servlet/connector", viewPath = "/front/task")
public class ElfinderController extends BaseController {

    public void index(){
        MyServiceFactory factory = new MyServiceFactory();
        try {
            factory.initConnectorServlet(getRequest(),getResponse());
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    public void dataBank(){
        render("data2.jsp");
    }

}

        最后页面引入相应的js、css在初始化elfinder就可以了，页面初始化如下:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
    <title>elFinder 2.1.x source version with PHP connector</title>

    <link rel="stylesheet" href="${root}/statics/front/elfinder/css/theme.css" type="text/css" media="screen" charset="utf-8">
    <link rel="stylesheet" href="${root}/statics/front/elfinder/css/elfinder.full.css" type="text/css" media="screen" charset="utf-8">
    <link rel="stylesheet" href="${root}/statics/front/elfinder/css/jquery-ui.css" type="text/css" media="screen" charset="utf-8">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="${root}/statics/front/elfinder/js/jquery-ui.js" type="text/javascript" charset="utf-8"></script>
    <script src="${root}/statics/front/elfinder/js/elfinder.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="${root}/statics/front/elfinder/js/extras/editors.default.js" type="text/javascript" charset="utf-8"></script>
    <script src="${root}/statics/front/elfinder/js/i18n/elfinder.zh_CN.js" type="text/javascript" charset="utf-8"></script>
    <%--<script data-main="${root}/statics/front/elfinder/js/main.js" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"></script>--%>
    <script>
        $(document).ready(function() {
            $('#elfinder').elfinder({
                url : '${root}/elfinder-servlet/connector',
            });
        });
    </script>

</head>
<body>

<!-- Element where elFinder will be created (REQUIRED) -->
<div id="elfinder"></div>

</body>
</html>