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?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>

?

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/249042.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/249042.shtml
英文地址，請注明出處：http://en.pswp.cn/news/249042.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

springmvc中對日期格式化的處理

springmvc中對日期格式化的處理

DateTimeFormat(pattern"yyyy-MM-dd") 返回的時候java.util.Date pattern"yyyy-MM-dd"必須要和頁面中的日期格式對應。 contraller層&#xff1a; package com.chenk.web.controller;import org.springframework.stereotype.Controller; import org.spring…
閱讀更多...
再次學習javascript中的參數傳遞

再次學習javascript中的參數傳遞

javascript中的全部函數的參數傳遞都是依照值傳遞的&#xff0c;做了以下測試&#xff1a; function addTen(num){num 10;return num; }var count 20; var result addTen(count); alert(cont); //20 alert(result); //30 好吧。上面僅僅是做了基本類型的傳遞&#xff0c;再…
閱讀更多...
基于spring-boot和elfinder的在線文件管理

基于spring-boot和elfinder的在線文件管理

基于spring-boot和elfinder的在線文件管理 大家好&#xff0c;我是帥氣小伙&#xff0c;今天為大家分享的是一個輪子&#xff0c;最近在項目中需要一些CMS的功能&#xff0c;在線管理一些靜態資源文件&#xff0c;在經過一番資料查找&#xff0c;最終決定使用elfinder。它的官方…
閱讀更多...
bzoj 4736: 溫暖會指引我們前行 （LCT 維護最大生成樹）

bzoj 4736: 溫暖會指引我們前行 （LCT 維護最大生成樹）

鏈接&#xff1a;https://www.lydsy.com/JudgeOnline/problem.php?id4736 題面&#xff1a; 寒冬又一次肆虐了北國大地 無情的北風穿透了人們御寒的衣物 可憐蟲們在冬夜中發出無助的哀嚎 “凍死寶寶了&#xff01;” 這時 遠處的天邊出現了一位火焰之神 “我將賜予你們溫暖和希…
閱讀更多...
WPF使用IDataErrorInfo進行數據校驗

WPF使用IDataErrorInfo進行數據校驗

WPF使用IDataErrorInfo進行數據校驗 原文:WPF使用IDataErrorInfo進行數據校驗這篇博客將介紹如何使用IDataErrorInfo進行數據校驗。下面直接看例子。一個Customer類&#xff0c;兩個屬性(FirstName, Age) class Customer {public string FirstName{get;set;}public int Age{get…
閱讀更多...
web 界面設計 Axure元件樣式

web 界面設計 Axure元件樣式

找不到原創了&#xff0c;若侵權&#xff0c;請聯系博主刪除&#xff01;謝謝
閱讀更多...
cf 786 B 線段樹優化建圖

cf 786 B 線段樹優化建圖

cf 786 B 鏈接 CF 思路 n個點&#xff0c;3種建邊方式&#xff0c;規模\(O(n^2)\) 線段樹優化建圖 注意 讀入的數據好坑啊&#xff0c;說好的v,u變成了u,v。 兩棵樹&#xff0c;一棵出&#xff0c;一棵入。線段樹的作用只不過是按照那個形狀建邊而已&#xff0c;并沒啥用。 初始…
閱讀更多...
mysql -uroot -p -P3306 -h192.168.0.111無法遠程連接mysql

mysql -uroot -p -P3306 -h192.168.0.111無法遠程連接mysql

1 在裝有MySQL的機器上登錄MySQL mysql -u root -p密碼2 執行USE mysql; 3 執行UPDATE user SET host % WHERE user root;這一句執行完可能會報錯&#xff0c;不用管它4 執行FLUSH PRIVILEGES; 4---> 刷新權限表&#xff0c;更改后需執行才能生效。 一篇博客&#xff1a;h…
閱讀更多...
iPhone6和iPhone6 plus的iOS8設計尺寸參考指南

iPhone6和iPhone6 plus的iOS8設計尺寸參考指南

找不到原創了&#xff0c;若侵權&#xff0c;請聯系博主刪除&#xff01;謝謝
閱讀更多...
歐幾里得

歐幾里得

轉載于:https://www.cnblogs.com/morui/p/10799359.html
閱讀更多...
pl/sql下DBMS_OUTPUT.PUT_LINE的輸出位置

pl/sql下DBMS_OUTPUT.PUT_LINE的輸出位置

項目里存儲過程中用到DBMS_OUTPUT.PUT_LINE進行輸出日志&#xff0c;一開始不知道在哪里看&#xff0c;網上很多都是直接運行后的位置。但是儲過程中的日志找了好一會&#xff0c;記錄一下。 1、運行時輸出位置。 declarein_interval_start_id varchar2(40);in_interval_end_id…
閱讀更多...
javaweb學習總結(四十五)——監聽器(Listener)學習二

javaweb學習總結(四十五)——監聽器(Listener)學習二

一、監聽域對象中屬性的變更的監聽器 域對象中屬性的變更的事件監聽器就是用來監聽 ServletContext, HttpSession, HttpServletRequest 這三個對象中的屬性變更信息事件的監聽器。 這三個監聽器接口分別是ServletContextAttributeListener, HttpSessionAttributeListener 和Ser…
閱讀更多...
Excel_DATEDIF函數計算工齡、計算年假

Excel_DATEDIF函數計算工齡、計算年假

基本語法 DATEDIF(開始日期&#xff0c;結束日期&#xff0c;unit) 基本用法&#xff1a; 實戰&#xff1a; 1、計算工齡&#xff1a; 2、計算年假 轉載于:https://www.cnblogs.com/wodexk/p/10799890.html
閱讀更多...
Cordova - 徹底搞定IOS編譯！

Cordova - 徹底搞定IOS編譯！

操作系統&#xff1a;OSX10.14 XCode&#xff1a;10.1 Cordova&#xff1a;8.1.2 假設已經配置好了Cordova開發環境&#xff0c;Apple ID你也有&#xff0c;XCode也可以正常工作了&#xff0c;那么就可以繼續看這篇文章了&#xff01; 如果你沒有看我這篇文章&#xff0c;那么你…
閱讀更多...
javaweb學習總結(四十四)——監聽器(Listener)學習

javaweb學習總結(四十四)——監聽器(Listener)學習

一、監聽器介紹 1.1、監聽器的概念 監聽器是一個專門用于對其他對象身上發生的事件或狀態改變進行監聽和相應處理的對象&#xff0c;當被監視的對象發生情況時&#xff0c;立即采取相應的行動。監聽器其 實就是一個實現特定接口的普通java程序&#xff0c;這個程序專門用于監聽…
閱讀更多...
第一期沖刺01

第一期沖刺01

1、我昨天的成就 確定了軟件所滿足的需求 2、遇到什么困難 跟航哥有太多想要實現的&#xff0c;但后續慢慢找到了重點 3、今天的任務 安裝安卓studio 配置好編程所需要的環境 轉載于:https://www.cnblogs.com/zjm15511858030/p/11065660.html
閱讀更多...
vue無縫滾動的插件開發填坑分享

vue無縫滾動的插件開發填坑分享

寫插件的初衷 1.項目經常需要無縫滾動效果&#xff0c;當時寫jq的時候用用msClass這個老插件&#xff0c;相對不上很好用。2.后來轉向vue在vue-awesome沒有找到好的無縫滾動插件&#xff0c;除了配置swiper可以實現但是相對來說太重了&#xff0c;于是自己造了個輪子。 3.在這分…
閱讀更多...
Spring 注解 @Resource和@Autowired

Spring 注解 @Resource和@Autowired

Resource和Autowired兩者都是做bean的注入使用。 其實Resource并不是Spring的注解&#xff0c;他的包是javax.annotation.Resource 需要導入。但是Spring支持該注解的注入。 共同點&#xff1a;兩者都可以寫在字段和setter方法上。兩者如果都寫在字段上&#xff0c;就不需要寫…
閱讀更多...
洛谷 P1091 合唱隊型

洛谷 P1091 合唱隊型

很容易想到維護一個最長上升子序列和一個最長下降子序列。然后枚舉一個點k&#xff0c;取所有以k結尾的最長上升子序列和以k開頭的最長下降子序列的長度的和中最大的&#xff0c;表示留下的人數。再用總人數減去這個&#xff0c;等于出隊人數 另外類似的一道題&#xff1a;最長…
閱讀更多...
PHP常用的自定義函數

PHP常用的自定義函數

PHP常用的自定義函數 目錄 php常用自定義函數類下載php 設置字符編碼為utf-8路徑格式化(替換雙斜線為單斜線)轉碼打印輸出api返回信息字符串截取 方法一:方法二:數組 字符串 對象 json格式的字符串互轉強制類型轉換php序列化serialize與返回序列化unserialeze創建日志文件獲取i…
閱讀更多...
最新文章

Copyright @ 2022~2023