java 是一种可以撰写跨平台应用软件的面向对象的程序设计语言,是由 Sun Microsystems 公司于 1995 年 5 月推出的 Java 程序设计语言和 Java 平台(即 JavaEE(j2ee), JavaME(j2me), JavaSE(j2se))的总称。
这篇文章主要为大家详细介绍了 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. 最终效果图
来源: http://www.phperz.com/article/18/0102/356243.html