Simditor图片上传
上一篇文章(Simditor用法)仅仅是简单的默认配置,我们可自己定义工具栏button使其更丰富和实现上传图片功能
初始化编辑器
<script type="text/javascript">
$(function(){
toolbar = [ 'title', 'bold', 'italic', 'underline', 'strikethrough',
'color', '|', 'ol', 'ul', 'blockquote', 'code', 'table', '|',
'link', 'image', 'hr', '|', 'indent', 'outdent' ];
var editor = new Simditor( {
textarea : $('#editor'),
placeholder : '这里输入内容...',
toolbar : toolbar, //工具栏
defaultImage : 'simditor-2.0.1/images/image.png', //编辑器插入图片时使用的默认图片
upload : {
url : 'ImgUpload.action', //文件上传的接口地址
params: null, //键值对,指定文件上传接口的额外參数,上传的时候随文件一起提交
fileKey: 'fileDataFileName', //server端获取文件数据的參数名
connectionCount: 3,
leaveConfirm: '正在上传文件'
}
});
})
</script>
upload默觉得false,设置为true或者键值对就能够实现上传图片,界面是出来了,还须要进行后台编码(本例为Struts2)
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaXRteWhvbWUxOTkw/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />
实现功能之前须要改动一下simditor.js,我们能够对"本地图片" 用chrome审查元素发现没有name属性
打开simditor.js找到
return $input = $('<input type="file" title="' + Simditor._t('uploadImage') + '" accept="image/*">').appendTo($uploadItem);这一行,
能够搜索accept="image/*" 高速找到在input里加上 name="fileData"
例如以下:
return _this.input = $('<input name="fileData" type="file" title="' + Simditor._t('uploadImage')
+ '" accept="image/*">').appendTo($uploadBtn);
相同继续搜索accept="image/*" 以下另一个,加上name="fileData"
ImgUploadAction
public class ImgUploadAction extends ActionSupport {
private static final long serialVersionUID = 1L;
private String err = "";
private String msg; //返回信息
private File fileData; //上传文件
private String fileDataFileName; //文件名称 public String imgUpload() {
//获取response、request对象
ActionContext ac = ActionContext.getContext();
HttpServletResponse response = (HttpServletResponse) ac.get(ServletActionContext.HTTP_RESPONSE);
HttpServletRequest request = (HttpServletRequest) ac.get(ServletActionContext.HTTP_REQUEST); response.setContentType("text/html;charset=gbk"); PrintWriter out = null;
try {
out = response.getWriter();
} catch (IOException e1) {
e1.printStackTrace();
} String saveRealFilePath = ServletActionContext.getServletContext().getRealPath("/upload");
File fileDir = new File(saveRealFilePath);
if (!fileDir.exists()) { //假设不存在 则创建
fileDir.mkdirs();
}
File savefile;
savefile = new File(saveRealFilePath + "/" + fileDataFileName);
try {
FileUtils.copyFile(fileData, savefile);
} catch (IOException e) {
err = "错误"+e.getMessage();
e.printStackTrace();
}
String file_Name = request.getContextPath() + "/upload/" + fileDataFileName; msg = "{\"success\":\"" + true + "\",\"file_path\":\"" + file_Name + "\"}";
out.print(msg); //返回msg信息
return null;
} public String getErr() {
return err;
}
public void setErr(String err) {
this.err = err;
} public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
} public File getFileData() {
return fileData;
}
public void setFileData(File fileData) {
this.fileData = fileData;
} public String getFileDataFileName() {
return fileDataFileName;
}
public void setFileDataFileName(String fileDataFileName) {
this.fileDataFileName = fileDataFileName;
}
}
作者:itmyhome
源代码:下载
版权声明:本文博主原创文章。博客,未经同意不得转载。
Simditor图片上传的更多相关文章
- Simditor 富文本编辑器多选图片上传、视频连接插入
simditor 是一个基于浏览器的所见即所得的文本编辑器.Simditor 富文本编辑器, 支持多选图片上传, 视频连接插入, HTML代码编辑以及常用富文本按钮,支持的浏览器:IE10.Firef ...
- C#中富文本编辑器Simditor带图片上传的全部过程(MVC架构的项目)
描述:最近c#项目中使用富文本编辑器Simditor,记录一下以便以后查看. 注:此项目是MVC架构的. 1.引用文件 项目中引用相应的css和js文件,注意顺序不能打乱,否则富文本编辑器不会正常显示 ...
- c#中富文本编辑器Simditor带图片上传的全部过程(项目不是mvc架构)
描述:最近c#项目中使用富文本编辑器Simditor,记录一下以便以后查看. 注:此项目不是MVC架构的. 1.引用文件 项目中引用相应的css和js文件,注意顺序不能打乱,否则富文本编辑器不会正常显 ...
- Asp.Net Mvc 使用WebUploader 多图片上传
来博客园有一个月了,哈哈.在这里学到了很多东西.今天也来试着分享一下学到的东西.希望能和大家做朋友共同进步. 最近由于项目需要上传多张图片,对于我这只菜鸟来说,以前上传图片都是直接拖得控件啊,而且还是 ...
- 06.LoT.UI 前后台通用框架分解系列之——浮夸的图片上传
LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...
- JS图片上传预览插件制作(兼容到IE6)
其实,图片预览功能非常地常见.很意外,之前遇到上传图片的时候都不需要预览,也一直没有去实现过.现在手上的项目又需要有图片预览功能,所以就动手做了一个小插件.在此分享一下思路. 一.实现图片预览的一些方 ...
- HTML5笔记:跨域通讯、多线程、本地存储和多图片上传技术
最近做项目在前端我使用了很多新技术,这些技术有bootstrap.angularjs,不过最让我兴奋的还是使用了HTML5的技术,今天我想总结一些HTML5的技术,好记性不如烂笔头,写写文章可以很好的 ...
- 对百度的UEditor多图片上传的一些补充
我已经写了一篇文章关于百度的UEditor提取多图片上传模块.如果还没有看过,请点击以下链接查看 http://www.cnblogs.com/luke1006/p/3719029.html 出差了两 ...
- 使用localResizeIMG3+WebAPI实现手机端图片上传
前言 惯例~惯例~昨天发表的使用OWIN作为WebAPI的宿主..嗯..有很多人问..是不是缺少了什么 - - 好吧,如果你要把OWIN寄宿在其他的地方...代码如下: namespace Conso ...
随机推荐
- java实现代理domino web邮件下载
[背景] 近日在研究domino web邮件下载功能,下载的邮件能够导入foxmail.outlook邮件client,下载的邮件格式为eml. [參考代码](须要下载jmail.jar包) priv ...
- java web开发人员经常使用标签
struts标签库 国际化配置 配置国际化 1.国际化配置 在struts自带的app中的struts-config.xml中的<message-resources parameter=&quo ...
- zookeeper集群的python代码测试
上一篇已经讲解了如何安装zookeeper的python客户端,接下来是我在网上搜到的例子,举例应用环境是: 1.当有两个或者多个服务运行,并且同意时间只有一个服务接受请求(工作),其他服务待命. 2 ...
- cheese desktop内容
#!/usr/bin/env xdg-open [Desktop Entry] Encoding=UTF- Version=1.0 Type=Application Terminal=false Na ...
- [ACM] HDU 3395 Special Fish (最大重量二分图匹配,KM算法)
Special Fish Problem Description There is a kind of special fish in the East Lake where is closed to ...
- 区域及分离、Js压缩、css、jquery扩展
后台管理区域及分离.Js压缩.css.jquery扩展 本系列目录:ASP.NET MVC4入门到精通系列目录汇总 有好一段时间没更新博文了,最近在忙两件事:1.看书,学习中...2.为公司年会节目做 ...
- effective c++ 条款18 make interface easy to use correctly and hard to use incorrectly
举一个容易犯错的例子 class Date { private: int month; int day; int year; public: Date(int month,int day,int ye ...
- 更新代码和工具,组织起来,提供所有博文(C++,2014.09)
为了更容易地管理各种规范和工具所涉及的资源鲍文,现在把这些资源迁移 GitHub 在,趣者可前往下载. C++ 1.<通用高性能 Windows Socket 组件 HP-Socket v3.2 ...
- Apple Swift编程语言入门
1 简单介绍 今天凌晨Apple刚刚公布了Swift编程语言,本文从其公布的书籍<The Swift Programming Language>中摘录和提取而成.希望对各位的iOS&a ...
- ATL 创COM物
我原来以前写dll创建过程,而直接使用LoadLibrary加载动态库. 但ATL提出了一个非常重要的特点是引入COM对象的概念. 首先. ATL active template library该活动 ...