?最近接到一個需求，客戶需要能在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?ServletConnectorController?_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);}@Overridepublic?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>

?

總結

以上是生活随笔為你收集整理的Web文件管理器 elfinder-彩龙社区的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。