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，一经查实，立即删除！

相关文章

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