上一篇文章(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图片上传的更多相关文章

  1. Simditor 富文本编辑器多选图片上传、视频连接插入

    simditor 是一个基于浏览器的所见即所得的文本编辑器.Simditor 富文本编辑器, 支持多选图片上传, 视频连接插入, HTML代码编辑以及常用富文本按钮,支持的浏览器:IE10.Firef ...

  2. C#中富文本编辑器Simditor带图片上传的全部过程(MVC架构的项目)

    描述:最近c#项目中使用富文本编辑器Simditor,记录一下以便以后查看. 注:此项目是MVC架构的. 1.引用文件 项目中引用相应的css和js文件,注意顺序不能打乱,否则富文本编辑器不会正常显示 ...

  3. c#中富文本编辑器Simditor带图片上传的全部过程(项目不是mvc架构)

    描述:最近c#项目中使用富文本编辑器Simditor,记录一下以便以后查看. 注:此项目不是MVC架构的. 1.引用文件 项目中引用相应的css和js文件,注意顺序不能打乱,否则富文本编辑器不会正常显 ...

  4. Asp.Net Mvc 使用WebUploader 多图片上传

    来博客园有一个月了,哈哈.在这里学到了很多东西.今天也来试着分享一下学到的东西.希望能和大家做朋友共同进步. 最近由于项目需要上传多张图片,对于我这只菜鸟来说,以前上传图片都是直接拖得控件啊,而且还是 ...

  5. 06.LoT.UI 前后台通用框架分解系列之——浮夸的图片上传

    LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...

  6. JS图片上传预览插件制作(兼容到IE6)

    其实,图片预览功能非常地常见.很意外,之前遇到上传图片的时候都不需要预览,也一直没有去实现过.现在手上的项目又需要有图片预览功能,所以就动手做了一个小插件.在此分享一下思路. 一.实现图片预览的一些方 ...

  7. HTML5笔记:跨域通讯、多线程、本地存储和多图片上传技术

    最近做项目在前端我使用了很多新技术,这些技术有bootstrap.angularjs,不过最让我兴奋的还是使用了HTML5的技术,今天我想总结一些HTML5的技术,好记性不如烂笔头,写写文章可以很好的 ...

  8. 对百度的UEditor多图片上传的一些补充

    我已经写了一篇文章关于百度的UEditor提取多图片上传模块.如果还没有看过,请点击以下链接查看 http://www.cnblogs.com/luke1006/p/3719029.html 出差了两 ...

  9. 使用localResizeIMG3+WebAPI实现手机端图片上传

    前言 惯例~惯例~昨天发表的使用OWIN作为WebAPI的宿主..嗯..有很多人问..是不是缺少了什么 - - 好吧,如果你要把OWIN寄宿在其他的地方...代码如下: namespace Conso ...

随机推荐

  1. [Java] HttpClient有个古怪的stalecheck选项

    打开stale check会让每次http请求额外消耗15毫秒.而且stalecheck选项缺省是打开的. 这有必要吗???? 在局域网里面调用web api service的时候会死人的. http ...

  2. 你怎么知道你的网站K

    最近有朋友问我关于网站K问题,你怎么知道被提及哪些网站K方面.总结了六个方法后,,至于有没有其他办法.欢迎和我交流讨论. 检测方法是网站的搜索引擎惩罚:   首先要明白的是.搜索引擎不惩罚easy侦查 ...

  3. hdu-2814-Interesting Fibonacci-斐波那契周期节

    哇,其实我2A该....否1A纯脑损伤.. 乞讨:F(a^b)^(F(a^b) ^ (n-1))%c  既是求F(a^b)^(F(a^b) ^ (n-1)%phi[c]+phi[c])%c 先求x=F ...

  4. Cocos-2dx-Lua中使用Luaj的完整示例(转)

    如何使用Luaj进行java与Lua之间的交互调用 一.主要分为两个大步骤,Lua工程的修改,android工程的修改 二.工程环境 开发工具:Cocos-Code-IDE Lua版本 : Lua 5 ...

  5. 泛泰A860 Andorid4.4.3 KTU84M (Omni) 图赏

    Omni4.4.3 For Pantech A860L/K/S watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc3lob3N0/font/5a6L5L2T/ ...

  6. 【原创】leetCodeOj --- Largest Number 解题报告

    原题地址: https://oj.leetcode.com/problems/largest-number/ 题目内容: Given a list of non negative integers, ...

  7. RESTful API Design With NodeJS & Restify

    http://code.tutsplus.com/tutorials/restful-api-design-with-nodejs-restify--cms-22637 The RESTful API ...

  8. 这两个成员函数inline重新virtual种类

    inlineType表示在编译时扩展功能,随着在函数调用的函数体而出替换函数调用:和vitual它是c++多态的必要条件,但为了表现出多态性,您将需要等到执行,要知道什么是真正的函数调用.从表面上看这 ...

  9. decimal ? 含义

    例如:   decimal ? je = zfje;   意思是  将 JE赋值为  ZFJE ,  并且允许  JE 为 NULL 值 这时JE为引用类型

  10. phonegap+emberjs+python手机店发展,html5实现本地车类别~

    商城开发项目,现在需要做出APP,无奈出场前android但不是很精通.最后选择phonegap实现app. 由于之前办理购物车分为登陆和登陆后两种情况,登录前必须充分利用本地存储.而基于phoneg ...