jsp版ueditor(1.4.3.2)修改在线附件带文件夹展示功能

原版的ueditor在线附件是遍历整个附件文件夹将内部所有文件遍历出来。主要修改实现层级遍历，当点击附件文件夹下的子文件夹时，进入子文件夹展示其中文件，并拥有返回功能。

修改结果截图如下：

一、修改ActionEnter.java文件（90行左右）；

case ActionMap.LIST_FILE: conf = configManager.getConfig( actionCode ); int start = this.getStartIndex(); //获取前台页面传递的文件路径 String filePath = this.request.getParameter("filePath"); state = new FileManager( conf ).listFile( start , filePath ); break;

二、修改FileManager.java文件；

1.修改getPath方法

private String getPath ( File file ) { //String path = file.getAbsolutePath(); //BUG String path = PathFormat.format(file.getAbsolutePath()); return path.replace( this.rootPath, "" ); }

2.修改listFile方法

public State listFile(int index, String filePath) { /**修改位置start*/ if (!filePath.equals("")) { this.dir = this.rootPath + filePath; } /**修改位置end*/ File dir = new File(this.dir); State state = null; if (!dir.exists()) { return new BaseState(false, AppInfo.NOT_EXIST); } if (!dir.isDirectory()) { return new BaseState(false, AppInfo.NOT_DIRECTORY); } /**修改位置start*/ File[] files = dir.listFiles(); if (files == null || files.length == 0) { System.out.println("文件夹是空的!"); return null; } /* else { for (File file2 : files) { if (file2.isDirectory()) { System.out.println("文件夹:" + file2.getAbsolutePath()); } else { System.out.println("文件:" + file2.getAbsolutePath()); } } }*/ //Collection<File> list = FileUtils.listFiles( dir, this.allowFiles, true ); /**修改位置end*/ if (index < 0 || index > files.length) { state = new MultiState(true); } else { Object[] fileList = Arrays.copyOfRange(files, index, index + this.count); state = this.getState(fileList); } state.putInfo("start", index); state.putInfo("total", files.length); return state; }

三、修改前台js事件，我将在线附件功能单独提取出来命名为attachonline.js，主要使用回调方法，每次点击文件夹都向后台发送请求。

1.添加附件文件夹根目录路径

var rootFilePath = "download/";

2.修改初始化tabbody

function setTabFocus(id) { if (!id) return; switch (id) { case 'online': onlineFile = onlineFile || new OnlineFile('fileList', ''); break; default ://传递filePath路径 onlineFile = new OnlineFile('fileList', id); } }

3.修改初始化容器，添加返回上级图标

this.container.innerHTML = '<ul id="goBack" ' + ((filePath != "" && filePath != rootFilePath) ? '' : ' style="display: none;"') + '>' + '<li data-url="' + (filePath2) + '">' + '<div class="file-wrapper"><i class="go_back"></i><span class="file-title">返回上级</span></div>' + '<span class="icon"></span>' + '</li>' + '</ul>'; this.list = document.createElement('ul'); this.clearFloat = document.createElement('li');

4.修改选中图片事件（当图片为文件夹时，点击后展示该文件夹），增加返回上级点击事件

/* 选中图片 */ domUtils.on(this.list, 'click', function (e) { var target = e.target || e.srcElement, li = target.parentNode; if (li.tagName.toLowerCase() == 'li') { if (li.firstChild.firstChild.classList[0] == "file-type-dir") { //文件夹点击事件 var filePath = $(li).attr("data-url"); setTabFocus(filePath); } else if (domUtils.hasClass(li, 'selected')) { domUtils.removeClasses(li, 'selected'); } else { domUtils.addClass(li, 'selected'); } } }); //返回点击事件 domUtils.on(document.getElementById("goBack"), 'click', function (e) { var target = e.target || e.srcElement, li = target.parentNode; if (li.tagName.toLowerCase() == 'li') { var filePath = $(li).attr("data-url"); setTabFocus(filePath); } });

5.修改向后台拉取图片列表数据传递的参数(getFileData方法)

editor.getActionUrl(editor.getOpt('fileManagerActionName') + "&filePath=" + filePath)

6.修改添加图片到列表界面上，增加对文件夹的判断

filetype = list[i].url.substr(list[i].url.lastIndexOf('.') + 1); //如果filetype包含download字符则当前文件是文件夹 if (filetype.indexOf("download") != -1) { filetype = "dir"; }

转载于:https://www.cnblogs.com/sjshare/p/5250934.html