java使用CKEditor实现图片上传功能

java如何使用CKEditor实现图片上传功能,具体内容如下

1.根据实际需要下载指定的CKEditor

2.删除文件ckeditor/plugins/image/dialogs/image.js预览框中文本内容,并修改hidden属性值为显示上传选项卡

删除image.js中包含在双引号中的上述文本

将image.js中的hidden属性值改为0

3.修改ckeditor/config.js文件,配置“上传到服务器”按钮调用的controller接口

4.“上传到服务器”按钮调用的controller级别的接口

@Controller
@RequestMapping("publicutil")
public class PublicUtilController { 

@RequestMapping(value = "uploadImage")
private void uploadImage(HttpServletRequest request, HttpServletResponse response, HttpSession session,@RequestParam MultipartFile[] upload) { 

 response.setCharacterEncoding("UTF-8");
 PrintWriter out=null;
 try {
  out = response.getWriter();
 } catch (IOException e1) {
  logger.error("response.getWriter()异常="+e1);
  e1.printStackTrace();
 }
 String callback = request.getParameter("CKEditorFuncNum"); 

 // 获得response,request
 Map<String, Object> m = new HashMap<String, Object>(); 

 if (!ServletFileUpload.isMultipartContent(request)) {
  m.put("error", 1);
  m.put("message", "请选择文件!");
  //return m;
  logger.info("请选择文件!");
 } 

 String originalFileName=null;//上传的图片文件名
 String fileExtensionName=null;//上传图片的文件扩展名
 for (MultipartFile file : upload) {
  if (file.getSize()> 10*1024* 1024) {
   out.println("<script type=\"text/javascript\">");
   out.println("window.parent.CKEDITOR.tools.callFunction(" + callback
      + ",''," + "'文件大小不得大于10M');");
   out.println("</script>"); 

  } 

  originalFileName=file.getOriginalFilename();
  logger.info("上传的图片文件名="+originalFileName);
  fileExtensionName= originalFileName.substring(
  originalFileName.lastIndexOf(".") ,originalFileName.length()).toLowerCase();
  logger.info("图片文件扩展名="+fileExtensionName); 

  String[] imageExtensionNameArray= WebsiteConstant.IMAGE_EXTENSION_NAME_ARRAY; 

  String allImageExtensionName="";
  boolean isContain=false;//默认不包含上传图片文件扩展名
  for(int i=0;i<imageExtensionNameArray.length;i++){
   if(fileExtensionName.equals(imageExtensionNameArray[i])){
    isContain=true;
   }
   if(i==0){
    allImageExtensionName+=imageExtensionNameArray[i];
   }else{
    allImageExtensionName+=" , "+imageExtensionNameArray[i];
   } 

  } 

  String newFileName=java.util.UUID.randomUUID().toString()+fileExtensionName;
  String uploadPath =WebsiteConstant.PIC_APP_FILE_SYSTEM_CKEDITOR_LOCATION;
  if(isContain){//包含
   File pathFile = new File(uploadPath);
   if (!pathFile.exists()) { // 如果路径不存在,创建
    pathFile.mkdirs();
   }
   try {
    FileUtils.copyInputStreamToFile(file.getInputStream(), new File(uploadPath ,newFileName));
//    InputStream is=file.getInputStream();
//    File toFile = new File(uploadPath, newFileName);
//    OutputStream os = new FileOutputStream(toFile);
//    byte[] buffer = new byte[1024];
//    int length = 0;
//    while ((length = is.read(buffer)) > 0) {
//     os.write(buffer, 0, length);
//    }
//    is.close();
//    os.close();
   } catch (IOException e) {
    logger.error("FileUtils.copyInputStreamToFile uploadPath="+uploadPath+" newFileName ="+newFileName+" exception="+e);
   }
   String imageUrl=WebsiteConstant.PIC_APP_SERVER_URL+"images/ckeditor/"+newFileName;
   // 返回"图像信息"选项卡并显示图片 ,在对应的文本框中显示图片资源url
   out.println("<script type=\"text/javascript\">");
   out.println("window.parent.CKEDITOR.tools.callFunction(" + callback
      + ",'" +imageUrl + "','')");
   out.println("</script>"); 

  }else{
   out.println("<script type=\"text/javascript\">");
   out.println("window.parent.CKEDITOR.tools.callFunction(" + callback
      + ",''," + "'文件格式不正确(必须为"+allImageExtensionName+"文件)');");
   out.println("</script>");
  } 

 }
 } 

}
<span style="font-size:14px;">public class WebsiteConstant { 

 public static String[] IMAGE_EXTENSION_NAME_ARRAY={".jpg",".jpeg",".png",".gif",".bmp"};
 public static String PIC_APP_SERVER_URL="http://localhost:8090/Picture/";
 public static String PIC_APP_FILE_SYSTEM_CKEDITOR_LOCATION="/Users/abc/Documents/tomcat/webapps/Picture/images/ckeditor/";
 public static final int SUCCESS = 1; // 操作成功
</span>

5.若是在Maven项目中使用的CKEditor,需要在pom.xml中添加如下代码:

<dependency>
 <groupId>com.ckeditor</groupId>
 <artifactId>ckeditor-java-core</artifactId>
 <version>3.5.3</version>
</dependency>

6.最终效果图

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • java web图片上传和文件上传实例

    图片上传和文件上传本质上是一样的,图片本身也是文件.文件上传就是将图片上传到服务器,方式虽然有很多,但底层的实现都是文件的读写操作. 注意事项 1.form表单一定要写属性enctype="multipart/form-data" 2.为了能保证文件能上传成功file控件的name属性值要和你提交的控制层变量名一致, 例如空间名是file那么你要在后台这样定义 private File file; //file控件名 private String fileContentType;//图

  • Java图片上传实现代码

    本文实例为大家分享了Java图片上传代码,供大家参考,具体内容如下 import java.io.*; import java.net.*; /* *发送端 */ class picsend { public static void main(String[] args) throws Exception { if(args.length!=1) { System.out.println("请选择一张.jpg图片"); return; } File file = new File(ar

  • Java实现的简单图片上传功能示例

    本文实例讲述了Java实现的简单图片上传功能.分享给大家供大家参考,具体如下: import java.io.*; import java.net.*; /* *发送端 */ class picsend { public static void main(String[] args) throws Exception { if(args.length!=1) { System.out.println("请选择一张.jpg图片"); return; } File file = new F

  • Java+mysql本地图片上传数据库及下载示例

    做一个将本地图片上传到mysql数据库的小实例,顺便也下载下来到桌面检测是否上传成功. 在写代码之前得先在数据库中建立image表,用来存储图片. create table image (id int primary key auto_increment , name varchar(30) COMMENT '名称', content mediumblob COMMENT '图片'); 下面直接上代码: package jdbc_imagetest; import java.io.*; impo

  • Java Struts图片上传至指定文件夹并显示图片功能

    继上一次利用Servlet实现图片上传,这次利用基于MVC的Struts框架,封装了Servlet并简化了JSP页面跳转. JSP上传页面 上传一定要为form加上enctype="multipart/form-data",表示提交的数据时二进制的 并且必须是method="post" <%@ page language="java" contentType="text/html; charset=utf-8" page

  • java通过模拟post方式提交表单实现图片上传功能实例

    本文实例讲述了java通过模拟post方式提交表单实现图片上传功能.分享给大家供大家参考,具体如下: 模拟表单html如下: <form action="up_result.jsp" method="post" enctype="multipart/form-data" name="form1" id="form1"> <label> <input type="tex

  • 微信 java 实现js-sdk 图片上传下载完整流程

    最近做的一个项目刚好用到微信js-sdk的图片上传接口,在这里做一下总结. 在这里能知道使用js api的基本配置 https://mp.weixin.qq.com/wiki t=resource/res_main&id=mp1421141115&token=&lang=zh_CN 我这里没有用checkJsApi去判断当前客户端版本是否支持指定JS接口,好.通过看开发文档,我们知道调用js接口直接都要通过config接口注入权限验证配置 <code class="

  • Java通过jersey实现客户端图片上传示例

    在上一篇笔记 <SpringMVC实现图片上传>记录了将图片上传到本地的实现,在很多项目中都会有一台专门的文件服务器来保存文件的,这边记录下客户端通过jersey上传图片到文件服务端的实现. 由于要在不同主机上上传文件,所以不能直接通过流的方式来写,需要通过webService来完成,jersey是基于Java的一个轻量级RESTful风格的Web Services框架,它让客户端文件上传变得更简单. 1. maven依赖 spring的一些包以及fileupload和io包这边就不贴出来了.

  • Java以struts2为例介绍如何实现图片上传

    总的说图片上传有两种方式,一种是把图片文件写到数据库中,另一种是存到服务器文件目录中.写到数据库中的图片文件需要转换成二进制流的格式,占用数据库空间比较,适合少量图片的存储,比如说,系统中某些小图标,写到数据库中的优点是比较安全,不容易被用户不小心删除. 在struts2中实现(以图片上传为例) 1.FileUpload.jsp代码清单如下: <%@ page language="java" import="java.util.*" pageEncoding=

  • java web图片上传和文件上传实例详解

    java web图片上传和文件上传 图片上传和文件上传本质上是一样的,图片本身也是文件.文件上传就是将图片上传到服务器,方式虽然有很多,但底层的实现都是文件的读写操作. 注意事项 1.form表单一定要写属性enctype="multipart/form-data" 2.为了能保证文件能上传成功file控件的name属性值要和你提交的控制层变量名一致, 例如空间名是file那么你要在后台这样定义 private File file; //file控件名 private String f

  • JavaWeb实现裁剪图片上传完整代码

    本文实例为大家分享了JavaWeb实现裁剪图片上传完整案例,供大家参考,具体内容如下 实现思路 •使用jcrop插件手机要裁剪图片的坐标  •将收集到的参数传递到后台,在后台使用java图形对象绘制图像进行裁剪 ◦后台处理流程: 1.将上传的图片按按照比例进行压缩后上传到文件服务器,并且将压缩后的图片保存在本地临时目录中. 2.将压缩后的图片回显到页面,使用jcrop进行裁剪,手机裁剪坐标(x,y,width,height) ■@paramx 目标切片起点坐标X ■@param y 目标切片起点

  • Java实现图片上传到服务器并把上传的图片读取出来

    在很多的网站都可以实现上传头像,可以选择自己喜欢的图片做头像,从本地上传,下次登录时可以直接显示出已经上传的头像,那么这个是如何实现的呢? 下面说一下我的实现过程(只是个人实现思路,实际网站怎么实现的不太清楚) 实现的思路: 工具:MySQL,eclipse 首先,在MySQL中创建了两个表,一个t_user表,用来存放用户名,密码等个人信息, 一个t_touxiang表,用来存放上传的图片在服务器中的存放路径,以及图片名字和用户ID, T_touxiang表中的用户ID对应了t_user中的i

随机推荐