最近接到一个需求，客户需要能在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>
    <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>
<!-- Element where elFinder will be created (REQUIRED) -->
<div id="elfinder"></div>
</body>
</html>
 
                    最近接到一个需求，客户需要能在web页面进行文件管理，在需求调研时发现一个很好用的开源web文件管理器插件elfinder，功能比较完善，社区也很活跃，方便二次开发，源码在GitHub上有将近3K的star，而且每周都有更新提交。实际效果如下图所示：下面简要介绍下使用方法。首先从官网下载压缩包，目前最近的版本是elFinder-2.1.39，作者应该是php开发，所以压缩包里面带了一个完整的php示例，解压之后只需要把目录下的e...
				
elFinder是基于Web的开源文件管理器，用JavaScript编写，使用了jQuery UI，灵感来自 Mac OS X 的 Finder 程序。elFinder的主要目标是让你管理远程文件，像管理本地文件一样方便。它支持常用的本地操作方式，比如拖曳、移动、热键等。elFinder还可以创建和解压文档，QuickLook功能可以快速查找并浏览图片、Flash、文本、视频甚至PDF，允许你创建和编辑任何的文本文件或者缩放图片。灵活的配置选项可以控制：访问权限、上传文件类型、登陆用户等。elFinder 文件管理器 v2.1.37 更新日志-[php:security]重新修复windows服务器的目录遍历漏洞。elFinder截图
				
应用程序与文件系统的交互始终是高度安全敏感的，因为较小的功能漏洞很容易成为可利用漏洞的来源。这种观察在web文件管理器的情况下尤其正确，其作用是复制完整文件系统的功能并以透明的方式将其公开给客户端的浏览器。
elFinder 是一种流行的 Web 文件管理器，常用于 CMS 和框架，例如 WordPress 插件 (wp-file-manager) 或 Symfony 包，以允许对本地和远程文件进行简单操作。在过去，elFinder一直是针对不安全配置或实际代码漏洞的活跃攻击的一部分。因此，elFinder
				
elFinder
 警告：如果您在公共服务器上拥有ELFINDER的旧版本（尤其是2.1.48或更早版本），可能会对服务器和访问的用户造成严重损害。 您应该更新到最新版本或从服务器中删除它。
 elFinder是用于Web的开源文件管理器，使用jQuery UI用JavaScript编写。 创建的灵感来自Mac OS X操作系统中使用的Finder程序的简便性。
-主要开发部门
 -2.1开发分支，提交时自动构建为2.1
  - 2.1每日构建分支
可用性，例如MacOS Finder或Windows资源管理器
触摸设备的移动友好视图
远程服务器上文件和文件夹的所有操作（复制，移动，上载，创建文件夹/文件，重命名等）
 高性能服务器后端和轻客户端UI
本地文件系统，MySQL，FTP，SFTP，Box，Dropbox，GoogleDrive和OneDrive卷存储驱动程序
通过 Flysystem驱动程序支持AWS S3，Azure，Digital Ocean Spaces等
云存储（Box，Dropbox，GoogleDrive和OneDrive）驱
				
基于Web的文件管理系统，支持权限管理、历史版本管理、Office编辑、Office预览、在线解压缩、文件分享、文件加密、远程存储、跨仓库推送、跨服务器推送、秒传、断点续传、智能搜索、文件备注、本地自动备份、异地自动备份、一键迁移。
主要应用场景：文件管理系统、文档安全管理系统、分布式文档管理系统、协同办公系统、电子书、软件接口管理系统、自动备份软件、网页版SVN仓库、网页版GIT仓库、FTP客户端、SFTP客户端、SMB客户端、Linux系统远程文件访问。
				
file-service
一个基于ASP.NET Core的可伸缩、通用的文件服务器。
通常后端项目可能会有头像、图片、音频、视频等上传/下载需求，这些需求都可以抽象为文件服务。
支持Linux（推荐）、Windows
可伸缩式架构，支持部署1-N台文件服务器
RESTful架构的API接口，支持多语言客户端
支持文件秒传、断点续传、远程拉取上传
支持为用户指定磁盘空间配额
支持自定义...
				
springboot-elfinder是一个基于Spring Boot框架的开源文件管理器插件。它提供了一个易于集成和定制的文件管理解决方案。
springboot-elfinder支持常见的文件操作，如上传、下载、复制、移动、删除等。它还提供了文件夹导航、搜索、预览和回收站等功能，方便用户管理文件。
使用springboot-elfinder，我们可以轻松地集成文件管理功能到我们的Spring Boot应用程序中。我们只需要配置一些简单的参数，就可以让用户通过Web界面访问和管理文件。
此外，springboot-elfinder还支持自定义文件上传和下载的规则。我们可以根据具体的需求，配置允许的文件类型、最大文件大小等限制。
另外，springboot-elfinder还提供了丰富的插件和扩展机制。我们可以通过添加插件来扩展文件管理器的功能，例如增加图片缩略图、音频播放器等。
总之，springboot-elfinder是一个功能强大且易于使用的文件管理器插件。它提供了丰富的功能和灵活的扩展机制，可以方便地集成到我们的Spring Boot应用程序中，提供文件管理和操作的功能。
                Echart 5.0+版本报错Error in data(): “TypeError: Cannot read properties of undefined (reading ‘graphic‘)“
                    PairsNightRain: 
                    react呢
                Echart 5.0+版本报错Error in data(): “TypeError: Cannot read properties of undefined (reading ‘graphic‘)“
                    sakura俗: 
                    这个可以用！！！！！感谢
                解决vue打包后静态资源路径错误的问题
                    IT淘金者: 
                    是否是webpack版本的问题呢？extract-text-webpack-plugin 4.0的beta版本才支持webpack4.x， 或者使用mini-css-extract-plugin，extract-text-webpack-plugin 默认版本 在webpack3.x可用
                解决vue打包后静态资源路径错误的问题
                    qq123wewwe: 
                    ExtractTextPlugin is not defined这个报错怎么解决
                解决vue打包后静态资源路径错误的问题
                    qq123wewwe: 
                    ExtractTextPlugin is not defined这个报错怎么解决
            Echart 5.0+版本报错Error in data(): “TypeError: Cannot read properties of undefined (reading ‘graphic‘)“
            Webpack/Vue-cli两种方式加载markdown文件并实现代码高亮
            Vue组件通信原理剖析（三）provide/inject原理分析