UEditor上传图片和上传文件(基于jquery)
2017-07-19 12:36
218 查看
客户端:
<script id="container" name="content" type="text/plain">
这里写你的初始化内容
</script>
<script type="text/javascript">
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function(action) {
if (action == 'uploadimage') {
//这里调用后端我们写的图片上传接口
return '<%=basePath%>/system/FileAttachController/uploadUE.do';
}else if (action == 'uploadfile') {
//这里调用后端我们写的图片上传接口
return '<%=basePath%>/system/FileAttachController/uploadUE.do';
}else if (action == 'uploadvideo') {
//这里调用后端我们写的图片上传接口
return '<%=basePath%>/system/FileAttachController/uploadUE.do';
}else{
return this._bkGetActionUrl.call(this, action);
}
}
$(function(){
//初始化UI控件
PlatUtil.initUIComp();
var ue = UE.getEditor('container', {
autoHeightEnabled: true,
autoFloatEnabled: true,
maximumWords:10000,
/* 上传图片配置项 */
"imageActionName": "uploadimage", /* 执行上传图片的action名称 */
"imageFieldName": "file", /* 提交的图片表单名称 */
"imageMaxSize": 2048000, /* 上传大小限制,单位B */
"imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */
"imageCompressEnable": false, /* 是否压缩图片,默认是true */
"imageCompressBorder": 1600, /* 图片压缩最长边限制 */
"imageInsertAlign": "none", /* 插入的图片浮动方式 */
"imageUrlPrefix": "", /* 图片访问路径前缀 */
"imagePathFormat": "",
/* 上传文件配置 */
"fileActionName": "uploadfile", /* controller里,执行上传视频的action名称 */
"fileFieldName": "file", /* 提交的文件表单名称 */
"filePathFormat": "", /* 上传保存路径,可以自定义保存路径和文件名格式 */
"fileUrlPrefix": "", /* 文件访问路径前缀 */
"fileMaxSize": 51200000, /* 上传大小限制,单位B,默认50MB */
"fileAllowFiles": [
".png", ".jpg", ".jpeg", ".gif", ".bmp",
".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",
".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",
".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"
], /* 上传文件格式显示 */
/* 上传视频配置 */
"videoActionName": "uploadvideo", /* 执行上传视频的action名称 */
"videoFieldName": "file", /* 提交的视频表单名称 */
"videoPathFormat": "", /* 上传保存路径,可以自定义保存路径和文件名格式 */
"videoUrlPrefix": "", /* 视频访问路径前缀 */
"videoMaxSize": 102400000, /* 上传大小限制,单位B,默认100MB */
"videoAllowFiles": [
".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"], /* 上传视频格式显示 */
});
});
</script>
服务端:
@RequestMapping("/uploadUE")
public void uploadUE(HttpServletRequest request, HttpServletResponse response) {
Map<String, Object> result = new HashMap<String, Object>();
// 上传文件根目录文件
String uploadRootFolder = "uploadUE";
// 获取附件的根路径
String rooPath = PlatPropUtil.getPropertyValue("conf/config.properties", "attachFilePath");
// 获取网站的访问根路径
String attachFileUrl = PlatPropUtil.getPropertyValue("conf/config.properties", "attachFileUrl");
//获取文件存储路径
String attachFilePath = PlatPropUtil.getPropertyValue("conf/config.properties"
,"attachFilePath");
// 获取当前的日期
String currentDate = PlatDateTimeUtil.formatDate(new Date(), "YYYY-MM-dd");
StringBuffer uploadFileFolderPath = new StringBuffer(rooPath);
uploadFileFolderPath.append(uploadRootFolder).append("/").append(currentDate).append("/");
// 定义存储在数据库中的文件路径
StringBuffer dbFilePath = new StringBuffer(uploadRootFolder).append("/").append(currentDate).append("/");
try {
// 创建一个通用的多部分解析器
CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(
request.getSession().getServletContext());
// 判断 request 是否有文件上传,即多部分请求
if (multipartResolver.isMultipart(request)) {
// 转换成多部分request
MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
// 取得request中的所有文件名
Iterator<String> iter = multiRequest.getFileNames();
while (iter.hasNext()) {
// 取得上传文件
MultipartFile file = multiRequest.getFile(iter.next());
if (file != null) {
// 取得当前上传文件的文件名称
String originalFileName = file.getOriginalFilename();
String fileName = UUIDGenerator.getUUID() + "." + PlatFileUtil.getFileExt(originalFileName);
dbFilePath.append(fileName);
// 如果名称不为“”,说明该文件存在,否则说明该文件不存在
if (StringUtils.isNotEmpty(originalFileName)
&& StringUtils.isNotEmpty(originalFileName.trim())) {
File targetFile = new File(uploadFileFolderPath.toString(), fileName);
if (!targetFile.exists()) {
targetFile.mkdirs();
}
file.transferTo(targetFile);
}
Map<String,Object> data = new HashMap<String,Object>();
data.put("url", attachFileUrl + dbFilePath);
data.put("original", originalFileName);
String absoltePath = attachFilePath+dbFilePath;
File absolteFile = new File(absoltePath);
data.put("type",PlatFileUtil.getFileExt(dbFilePath.toString()));
data.put("size",absolteFile.length());
result.putAll(data);
}
}
}
result.put("state", "SUCCESS");
} catch (IOException e) {
result.put("state", "");
} catch (Exception e) {
result.put("state", "");
}
this.printObjectJsonString(result, response);
}
<script id="container" name="content" type="text/plain">
这里写你的初始化内容
</script>
<script type="text/javascript">
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function(action) {
if (action == 'uploadimage') {
//这里调用后端我们写的图片上传接口
return '<%=basePath%>/system/FileAttachController/uploadUE.do';
}else if (action == 'uploadfile') {
//这里调用后端我们写的图片上传接口
return '<%=basePath%>/system/FileAttachController/uploadUE.do';
}else if (action == 'uploadvideo') {
//这里调用后端我们写的图片上传接口
return '<%=basePath%>/system/FileAttachController/uploadUE.do';
}else{
return this._bkGetActionUrl.call(this, action);
}
}
$(function(){
//初始化UI控件
PlatUtil.initUIComp();
var ue = UE.getEditor('container', {
autoHeightEnabled: true,
autoFloatEnabled: true,
maximumWords:10000,
/* 上传图片配置项 */
"imageActionName": "uploadimage", /* 执行上传图片的action名称 */
"imageFieldName": "file", /* 提交的图片表单名称 */
"imageMaxSize": 2048000, /* 上传大小限制,单位B */
"imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */
"imageCompressEnable": false, /* 是否压缩图片,默认是true */
"imageCompressBorder": 1600, /* 图片压缩最长边限制 */
"imageInsertAlign": "none", /* 插入的图片浮动方式 */
"imageUrlPrefix": "", /* 图片访问路径前缀 */
"imagePathFormat": "",
/* 上传文件配置 */
"fileActionName": "uploadfile", /* controller里,执行上传视频的action名称 */
"fileFieldName": "file", /* 提交的文件表单名称 */
"filePathFormat": "", /* 上传保存路径,可以自定义保存路径和文件名格式 */
"fileUrlPrefix": "", /* 文件访问路径前缀 */
"fileMaxSize": 51200000, /* 上传大小限制,单位B,默认50MB */
"fileAllowFiles": [
".png", ".jpg", ".jpeg", ".gif", ".bmp",
".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",
".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",
".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"
], /* 上传文件格式显示 */
/* 上传视频配置 */
"videoActionName": "uploadvideo", /* 执行上传视频的action名称 */
"videoFieldName": "file", /* 提交的视频表单名称 */
"videoPathFormat": "", /* 上传保存路径,可以自定义保存路径和文件名格式 */
"videoUrlPrefix": "", /* 视频访问路径前缀 */
"videoMaxSize": 102400000, /* 上传大小限制,单位B,默认100MB */
"videoAllowFiles": [
".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"], /* 上传视频格式显示 */
});
});
</script>
服务端:
@RequestMapping("/uploadUE")
public void uploadUE(HttpServletRequest request, HttpServletResponse response) {
Map<String, Object> result = new HashMap<String, Object>();
// 上传文件根目录文件
String uploadRootFolder = "uploadUE";
// 获取附件的根路径
String rooPath = PlatPropUtil.getPropertyValue("conf/config.properties", "attachFilePath");
// 获取网站的访问根路径
String attachFileUrl = PlatPropUtil.getPropertyValue("conf/config.properties", "attachFileUrl");
//获取文件存储路径
String attachFilePath = PlatPropUtil.getPropertyValue("conf/config.properties"
,"attachFilePath");
// 获取当前的日期
String currentDate = PlatDateTimeUtil.formatDate(new Date(), "YYYY-MM-dd");
StringBuffer uploadFileFolderPath = new StringBuffer(rooPath);
uploadFileFolderPath.append(uploadRootFolder).append("/").append(currentDate).append("/");
// 定义存储在数据库中的文件路径
StringBuffer dbFilePath = new StringBuffer(uploadRootFolder).append("/").append(currentDate).append("/");
try {
// 创建一个通用的多部分解析器
CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(
request.getSession().getServletContext());
// 判断 request 是否有文件上传,即多部分请求
if (multipartResolver.isMultipart(request)) {
// 转换成多部分request
MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
// 取得request中的所有文件名
Iterator<String> iter = multiRequest.getFileNames();
while (iter.hasNext()) {
// 取得上传文件
MultipartFile file = multiRequest.getFile(iter.next());
if (file != null) {
// 取得当前上传文件的文件名称
String originalFileName = file.getOriginalFilename();
String fileName = UUIDGenerator.getUUID() + "." + PlatFileUtil.getFileExt(originalFileName);
dbFilePath.append(fileName);
// 如果名称不为“”,说明该文件存在,否则说明该文件不存在
if (StringUtils.isNotEmpty(originalFileName)
&& StringUtils.isNotEmpty(originalFileName.trim())) {
File targetFile = new File(uploadFileFolderPath.toString(), fileName);
if (!targetFile.exists()) {
targetFile.mkdirs();
}
file.transferTo(targetFile);
}
Map<String,Object> data = new HashMap<String,Object>();
data.put("url", attachFileUrl + dbFilePath);
data.put("original", originalFileName);
String absoltePath = attachFilePath+dbFilePath;
File absolteFile = new File(absoltePath);
data.put("type",PlatFileUtil.getFileExt(dbFilePath.toString()));
data.put("size",absolteFile.length());
result.putAll(data);
}
}
}
result.put("state", "SUCCESS");
} catch (IOException e) {
result.put("state", "");
} catch (Exception e) {
result.put("state", "");
}
this.printObjectJsonString(result, response);
}
相关文章推荐
- ueditor跨域上传图片文件(基于jsp框架、tomcat)
- 基于JQuery的图片上传预览插件(图片预览、过滤文件类型、限制图片大小、图片显示后回调)
- 基于UEditor的单独图片上传JQuery插件实现
- 基于springMVC的文件上传-图片
- 教你如何调用百度编辑器ueditor的上传图片、上传文件等模块
- 文件存到本地---SSM配置Ueditor实现图片的上传
- jfinal+ueditor上传图片、文件报“未找到上传数据错误”的解决方案
- 不使用form进行上传文件图片,使用jQuery上传文件图片
- java处理百度编辑器ueditor上传的图片等多媒体文件
- jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
- ueditor1.4.3配置过程(包含单独上传文件以及图片的使用)
- 百度UEditor图片文件改变默认保存到项目根路径,自定义上传路径或远程服务器
- 使用jquery.form.js上传图片或文件
- 基于jQuery仿uploadify的HTML5图片上传控件jquery.html5uploader
- asp.net下使用 jquery.form.js 上传图片(文件)
- 基于springmvc实现静态资源缓存(包括上传的图片文件)
- UEditor配置:图片上传和文件上传独立使用方法,兼容最新版 UEditor 1.4.3
- 基于jQuery的uploadify(flash上传文件)控件v1.6.2 bug修正
- jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
- jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)