html代码
代码如下 | 复制代码 |
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ page import="com.ckeditor.CKEditorConfig" %> <%@ page import="java.util.*" %> <%@ taglib uri="http://ckeditor.com" prefix="ckeditor"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link type="text/css" rel="stylesheet" href="ckeditor/_samples/sample.css" /> <title>CKEditor Demo</title> </head> <body> <form action="CKEditor" method="post"> |
图片上传action主要代码
代码如下 | 复制代码 |
public String execute() throws Exception { log.info("upload image..."); if(upload != null) { ActionContext context = ActionContext.getContext(); HttpServletRequest request = (HttpServletRequest) context.get(ServletActionContext.HTTP_REQUEST); HttpServletResponse response = (HttpServletResponse) context.get(ServletActionContext.HTTP_RESPONSE); String fileUrl = null; String CKEditorFuncNum = request.getParameter("CKEditorFuncNum"); String scheme = request.getScheme(); int port = request.getServerPort(); String serverName = request.getServerName(); String contextPath = request.getContextPath(); /*重命名文件名称*/ Calendar cal = Calendar.getInstance(); SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmssSSS"); String type = uploadFileName.substring(uploadFileName.lastIndexOf(".")); String newFileName = sdf.format(cal.getTime()) + type; String path = request.getSession().getServletContext().getRealPath("/"); File destFile = new File(path + UPLOAD_PATH + "/" + newFileName); FileUtils.copyFile(upload, destFile); log.info("上传图片成功。"); fileUrl = UPLOAD_PATH + newFileName; response.setContentType("text/html;charset=UTF-8"); PrintWriter out = response.getWriter(); out = response.getWriter(); fileUrl = scheme + "://" + serverName+":"+ port + contextPath + fileUrl; log.info("fileUrl:" + fileUrl); out.write("<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum + ",'" + fileUrl + "');</script>"); out.flush(); out.close(); } else { log.info("未上传任何文件."); } return SUCCESS; } |
问题总结
图片上传成功了,但是没有跳转到到预览框里去,却在原先的页面显示出这段js代码:
代码如下 | 复制代码 |
<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction(2,'/upload/commodity/20120406/201204061740421341.jpg', '');</script> |
并没有执行。
我百思不得其解,后来通过火狐我发现返回的代码被转义了:
Javascript代码
代码如下 | 复制代码 |
<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction(2,/upload/commodity/20120406/201204061740421341.jpg', '');</script> |
问题虽是找到了,但一直不知如何解决,又经过几番琢磨,发现了问题,原来是在后台向前台输出脚本时,没有指定contentType格式,这样写就木有问题了:
Java代码
代码如下 | 复制代码 |
HttpServletResponse response = ServletActionContext.getResponse(); // 设置headers参数 String fullContentType = "text/html;charset=UTF-8"; response.setContentType(fullContentType); out = response.getWriter(); out.write("<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction(" + this.CKEditorFuncNum + ",'" + getUploadRootPath() + path + "/" + this.newImageFileNames[0] + "');</script>"); |
我勒个去,网上也没有相关资料,忧郁了我一个星期