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.mzph.cn/news/249042.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

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

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

基于spring-boot和elfinder的在线文件管理 大家好&#xff0c;我是帅气小伙&#xff0c;今天为大家分享的是一个轮子&#xff0c;最近在项目中需要一些CMS的功能&#xff0c;在线管理一些静态资源文件&#xff0c;在经过一番资料查找&#xff0c;最终决定使用elfinder。它的官方…
阅读更多...
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;并没啥用。 初始…
阅读更多...
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;这个程序专门用于监听…
阅读更多...
vue无缝滚动的插件开发填坑分享

vue无缝滚动的插件开发填坑分享

写插件的初衷 1.项目经常需要无缝滚动效果&#xff0c;当时写jq的时候用用msClass这个老插件&#xff0c;相对不上很好用。2.后来转向vue在vue-awesome没有找到好的无缝滚动插件&#xff0c;除了配置swiper可以实现但是相对来说太重了&#xff0c;于是自己造了个轮子。 3.在这分…
阅读更多...
PHP常用的自定义函数

PHP常用的自定义函数

PHP常用的自定义函数 目录 php常用自定义函数类下载php 设置字符编码为utf-8路径格式化(替换双斜线为单斜线)转码打印输出api返回信息字符串截取 方法一:方法二:数组 字符串 对象 json格式的字符串互转强制类型转换php序列化serialize与返回序列化unserialeze创建日志文件获取i…
阅读更多...
春第十周作业

春第十周作业

作业&#xff1a; 这个作业属于那个课程C语言程序设计II这个作业要求在哪里https://edu.cnblogs.com/campus/zswxy/software-engineering-class2-2018/homework/3162我在这个课程的目标是阅读并学习这个作业在那个具体方面帮助我实现目标知道了我们以后工作所需的是雇主所需的参…
阅读更多...
第六次作业（C语言）

第六次作业（C语言）

心得体会 该题主要涉及知识点有&#xff1a;1、函数的定义&#xff1b;2、函数的调用&#xff08;即prime函数的调用&#xff09;&#xff1b;3、素数的判断&#xff1b;4、大小排序。 看到题时我首先想到了嵌套循环&#xff0c;可是仔细一看题目要求的是用prime函数的调用&…
阅读更多...
ProtocolHandler继承体系

ProtocolHandler继承体系

转载于:https://www.cnblogs.com/GooPolaris/p/10815072.html
阅读更多...
高频ES6

高频ES6

var promise new Promise((resolve, reject)> {if (操作成功) {resolve (value)}else{reject(error)} }) promise.than(function (value) {/*成功*/}, function(value) {/*失败*/}) Promise是异步编程的一种解决方案, 比传统的解决方案--回调函数和事件更加强大.由社区最早…
阅读更多...
NodeJS+Express+MongoDB - 张果 - 博客园

NodeJS+Express+MongoDB - 张果 - 博客园

目录 一、MongoDB 1.1、安装MongoDB 1.1.1、配置运行环境1.1.2、运行MongoDB1.2、数据库操作 1.2.1、创建数据库与查看数据库1.2.2、删除数据库1.2.3、插入数据1.2.4、查询数据1.2.5、修改1.2.6、删除二、NodeJS访问MongoDB 2.1、安装MongoDB访问驱动2.2、添加数据2.3、修改数…
阅读更多...
一个好用的浏览器暗色浏览插件 Dark Reader

一个好用的浏览器暗色浏览插件 Dark Reader

转载于:https://www.cnblogs.com/tyong/p/9973363.html
阅读更多...
实验 4 [bx]和 loop 的使用

实验 4 [bx]和 loop 的使用

实验结论 实验1&#xff1a;综合使用 loop,[bx]&#xff0c;编写完整汇编程序&#xff0c;实现向内存 b800:07b8 开始的连续 16 个字单元重复填充字数据 0403H。 1.源代码及实验结果 运行结果&#xff1a;屏幕中央出现一排红色的心❤。 2.将源代码程序中字数据 0403H→修改为 0…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023