利用ueditor的文件上传功能上传文件到外部服务器的地址&&&&&字符统计功能重写

来源：互联网发布：java试卷生成系统源码编辑：程序博客网时间：2024/05/01 01:24

markdown重写的文章地址: http://blog.csdn.net/wang_jingj/article/details/54343476

这几天用到了UEDITOR的文件上传功能,但是UEDITOR自带的文件上传功能只能将文件上传到项目根目录.百度搜索也没有很多相关的资料,更关键的是没有相关的源代码.

所以今天把我自己实现的这部分代码上传,希望大家共同进步!

如何使用UEDITOR以及UEDITOR的基本配置在这里不多说了,网上多的很.

本代码基于maven,spring3,spring MVC实现.

下面展示实现的过程.

第一步:

在JSP页面重写UEDITOR的getActionUrl方法

//编辑器资源文件根路径最好在ueditor.config.js中配置
window.UEDITOR_HOME_URL = "/ueditor/";
//建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
var ue = UE.getEditor('editor',{initialFrameHeight: 500,initialFrameWidth:800,maximumWords:3000,elementPathEnabled:false});
//复写UEDITOR的getActionUrl 方法,定义自己的Action
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function(action) {
if (action == 'uploadimage' || action == 'uploadfile') {
var id = $('#carInfoId').val();
return '<%=contextPath %>/ueditor/fileupload/upload.do';
} else {
return this._bkGetActionUrl.call(this, action);
}
};

UEDITOR官方介绍所有的Action都会经过这个方法.现在我们需要重定向的是文件上传和图片上传,其他的功能继续执行以前的功能代码.

第二步:

重写文件上传功能的Controller.

@Controller
@RequestMapping("/ueditor/fileupload")
public class FileUpLoadController {

// 文件上传路径
@Resource(name="fileuploadPath")
private String fileuploadPath;

// 文件读取路径
@Resource(name="httpPath")
private String httpPath;

/**
* 文件上传Action
* @param req
* @return UEDITOR 需要的json格式数据
*/
@RequestMapping(value="upload",method = RequestMethod.POST, produces = MediaType.APPLICATION_JSON_VALUE)
@ResponseBody
public Map<String,Object> upload(HttpServletRequest req){
Map<String,Object> result = new HashMap<String, Object>();

MultipartHttpServletRequest mReq = null;
MultipartFile file = null;
InputStream is = null ;
String fileName = "";
// 原始文件名 UEDITOR创建页面元素时的alt和title属性
String originalFileName = "";
String filePath = "";

try {
mReq = (MultipartHttpServletRequest)req;
// 从config.json中取得上传文件的ID
file = mReq.getFile("upfile");
// 取得文件的原始文件名称
fileName = file.getOriginalFilename();

originalFileName = fileName;

if(!StringUtils.isEmpty(fileName)){
is = file.getInputStream();
fileName = FileUtils.reName(fileName);
filePath = FileUtils.saveFile(fileName, is, fileuploadPath);
} else {
throw new IOException("文件名为空!");
}

result.put("state", "SUCCESS");// UEDITOR的规则:不为SUCCESS则显示state的内容
result.put("url",httpPath + filePath);
result.put("title", originalFileName);
result.put("original", originalFileName);
}
catch (Exception e) {
System.out.println(e.getMessage());
result.put("state", "文件上传失败!");
result.put("url","");
result.put("title", "");
result.put("original", "");
System.out.println("文件 "+fileName+" 上传失败!");
}

return result;
}
}

这里用到的工具类,源码里边有,由于篇幅原因,就不贴出来了.

文件上传的这个Controller需要注意的地方是返回的JSON数据格式.UEDITOR执行完此Controller之后,会在富文本编辑器内部生成html标签.而生成的内容就是根据此处的JSON数据来填充的.state的value值一定要是大写的"SUCCESS".

第三步:

配置文件上传目录和文件读取的地址.

#file upload path
fileuploadPath=F:/worksoft/nginxfilepath
#file read path
httpPath=http://localhost:80/

额...注释随便看看就好了哈.

此处文件上传和读取的服务器用的是nginx,具体请看下文.(默认端口号是80).

解释下为什么要用两个地址:1.文件上传路径是nginx存放文件的地址.2.文件读取地址是nginx对外开放的可以读取服务器内部文件的地址.试想我不可能用/temp/**/**放置到网页上进行显示,而且也显示不出来的.

第四步:

建立自己的NGINX服务器进行测试.

windows下的NGINX服务器的搭建和使用都是很简单的.此处需要注意的一点是:nginx默认的目录是它自己目录下边的html.我们如果想放到其他地方,则需要修改nginx/conf/nginx.conf文件.

server {
listen 80;
server_name localhost;

#charset koi8-r;

#access_log logs/host.access.log main;

location / {
root F:\worksoft\nginxfilepath;
index index.html index.htm;
}

然后启动nginx.就可以进行UEDITOR的测试了.

关于UEDITOR的字符统计功能,我不得不吐槽一下......一张图片或者一个文件都是按照一个字符进行统计的......这样可能会跟数据库字段的长度产生冲突导致项目上线后发生异常.不过这一点也可以通过重写UEDITOR的getContentLength方法来实现.

// 复写UEDITOR的getContentLength方法解决富文本编辑器中一张图片或者一个文件只能算一个字符的问题,可跟数据库字符的长度配合使用
UE.Editor.prototype._bkGetContentLength = UE.Editor.prototype.getContentLength;
UE.Editor.prototype.getContentLength = function(){
return this.getContent().length;
}

此处只是保留了UEDITOR自身的getContentLength方法,并没有其他地方再使用它.

附:源码下载地址:http://download.csdn.net/detail/qq457557442/8322227

2 0