不积跬步,无以至千里;不积小流,无以成江海。

SpringMVC中使用富文本编辑器Simditor上传图片

JAVA 康康 2468℃ 0评论

Simditor是Tower开源的所见即所得的在线富文本编辑器。Simditor的理念是保持简单,避免过度的功能,每一个特性都追求极致的用户体验。同时,Simditor也很容易扩展。

 

SinDitor的使用很简单

在你的html页面中引用如下文件:


<link media="all" rel="stylesheet" type="text/css" href="styles/simditor.css" />

<script type="text/javascript" src="scripts/jquery-2.0.3.js"></script>
<script type="text/javascript" src="scripts/module.js"></script>
<script type="text/javascript" src="scripts/uploader.js"></script>
<script type="text/javascript" src="scripts/simditor.js"></script>

可是上传图片就比较蛋疼

先来初始化编辑器

7
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(function () {
       //var editor = new Simditor({ textarea:$('#Editor')});
       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: '/Content/SimDetor/images/image.png',//编辑器插入图片时使用的默认图片 
           upload:{
              url: 'uploadImg.do',//文件上传的接口地址 
              params: null,//键值对,指定文件上传接口的额外参数,上传的时候随文件一起提交 
              fileKey: 'fileDataFileName',//服务器端获取文件数据的参数名 
              connectionCount: 3,
              leaveConfirm: '正在上传文件'
           }
       });
    });

然后写个SpringMVC的Controller

@RequestMapping("imgUpload")
public void ImgUpload(@RequestParam("fileData") CommonsMultipartFile fileData ,HttpServletRequest req ,HttpServletResponse res) {

 InputStream img=null;

OutputStream out = null;

PrintWriter print=null;

res.setCharacterEncoding("UTF-8");

try {

print = res.getWriter();

//时间戳
String imgType = fileData.getOriginalFilename().toLowerCase().split("\\.")[1];

if(imgType.equals("jpg")||imgType.equals("png")||imgType.equals("gif")||imgType.equals("jpeg")){

//图片不得小于2m

if(fileData.getSize()<2048000){

String imgName = System.currentTimeMillis()+"."+imgType; //更改图片名称

String dateDir = "uploads/"+new SimpleDateFormat("YYYYMMdd").format(new Date());

String path = req.getRealPath("/admin")+"/"+dateDir; //绝对目录 存放图片

String imgRealPath = dateDir+"/"+imgName; //相对路径

File dir = new File(path);

//目录不存在就创建目录

if(!dir.exists()) dir.mkdir();

img = fileData.getInputStream(); //获取文件流

File file = new File(path,imgName);

out = new FileOutputStream(file);

byte[] buffer = new byte[400];

int len = 0;

while((len=img.read(buffer)) != -1){

out.write(buffer,0,len);

}
msg="{ \"success\":true,\"msg\": \"图片上传成功!\",\"file_path\":\""+imgRealPath+"\"}";

}else{

msg="{ \"success\": false,\"msg\": \"文件不得超出2MB!\",\"file_path\":\"null\"}";

}

}else{

msg="{ \"success\":false,\"msg\": \"文件只能为jpg|png|gif 中的一种!\",\"file_path\":\"null\"}";

}

} catch (IOException e) {

msg="{ \"success\": false,\"msg\": \"图片上传失败! \",\"file_path\":\null\"}";

e.printStackTrace();

} finally{

try {

if(out!=null) out.close();

if(img!=null) img.close();

} catch (IOException e) {

e.printStackTrace();

}

}

print.print(msg); //返回ijson

}

一定要把file_path 的路径写对 路径是相对路径,返回前台 Simditor会自动加上当前url

QQ截图20160429224628

成功后的结果

QQ截图20160429222117

转载请注明:左手代码右手诗 » SpringMVC中使用富文本编辑器Simditor上传图片

喜欢 (1)or分享 (0)
发表我的评论
取消评论

 

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址