ckedit上传图片到数据库

inotgaoshou · 发表于 2013-1-15 02:36:14

最近要实现在ckedit上传图片，而且要上传保存到数据库，在网站找了不少资料，基本上都是保存到服务器的文件夹，但那些资料对我也起了很多作用。下面我把我的实现记录下来，作为备忘。（CKEditor 在jsp中实现文件上传的完整例子）http://blog.163.com/prevBlogPerma.do?host=ytrtfhj@126&srl=890531092010226023136&mode=prev

ckeditor非常强大，但官网上它的图片/文件上传使用了ckfinder，比较麻烦。我首先是在图片链接输入框的右边加个按钮，点击事件链接到已有的上传模块，上传后把图片的下载url(这个花了我不少时间)传递给左边的输入框即可。步骤如下：
  打开plugins\image\dialogs\image.js，在链接输入框代码结尾也就是 m.lang.image.urlMissing)},后面加上这些代码：
{type:'button',id:'myUpload',align:'center',label:'新上传 ',onClick:function(){var thisDialog = this.getDialog();var txtUrlObj = thisDialog.getContentElement('info', 'txtUrl'); var txtUrlId = txtUrlObj.getInputElement().$.id; var retFile = window.open("info2j.zrx?path=info/info_uploadImage&infotypeid="+top.document.getElementById('infotypeid').value+"&txtUrlId="+txtUrlId, "", "height=300, width=400"); if(retFile != null){this.getDialog().setValueOf('info','txtUrl',retFile);}}},
{type:'button',id:'myUpload',align:'center',label:'新上传 ',onClick:function(){var thisDialog = this.getDialog();var txtUrlObj = thisDialog.getContentElement('info', 'txtUrl'); var txtUrlId = txtUrlObj.getInputElement().$.id; 为了获得图片URL文本框的id，并可以传回页面；我这里由于jsp页面都是放在WEB-INF目录下，所以页面跳转是借助action来实现的。所谓我是先把id传到info2j.action，然后再从info_uploadImage.jsp页面拿，
var retFile = window.open("info2j.action?path=info/info_uploadImage&infotypeid="+top.document.getElementById('infotypeid').value+"&txtUrlId="+txtUrlId, "", "height=300, width=400");
跳转到info_uploadImage.jsp页面，并把图片URL文本框的id传过去
下面是info_uploadImage.jsp的简单代码
<%@ page language="java" contentType="text/html; charset=UTF-8"%><%@ taglib uri="/struts-tags" prefix="s"%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%><html><head><title>上传图片</title><script type="text/javascript">function checkFormat(filePath){var i = filePath.lastIndexOf(".");var len = filePath.length;var str = filePath.substring(i+1,len);var extName = "JPG,GIF,PNG,BMP";if(extName.indexOf(str.toUpperCase()) < 0){alert("图片格式不正确");return false;}return true;}/*图标预览，兼容ie，firefox*/function fileChange(o){if(checkFormat(o.value)){if(window.ActiveXObject){document.getElementById("uploadImg").width = 100;document.getElementById("uploadImg").height = 100;document.getElementById("uploadImg").src = o.value;}else{document.getElementById("uploadImg").width = 100;document.getElementById("uploadImg").height = 100;document.getElementById("uploadImg").src = o.files[0].getAsDataURL();}}} /* 给图片text附上图片地址*/    function finish(generatedId){    //获得图片text的id    var imageUrl = document.getElementById("txtUrlId").value;    alert("<s:text name='info.upload.success' />！"); window.opener.document.getElementById(imageUrl).value = "info_downloadImage.zrx?imageId="+generatedId;window.opener.document.getElementById("previewImage").setAttribute("src","info_downloadImage.zrx?imageId="+generatedId); window.close(); }          </script></head><body><s:form id="uploadForm" name="uploadForm" method="post" action="info_upLoadImage.zrx" theme="simple"enctype="multipart/form-data"  target="frame"><s:hidden id="infotypeid" name="infotypeid"></s:hidden><s:hidden id="txtUrlId" name="txtUrlId"></s:hidden><table align="center"><tr><td colspan="2"><s:file id="image" name="image" onchange="return fileChange(this)" /></td></tr><tr><td><input type="submit" value="上传" /></td><td><input type="button" value="取消" /></td></tr></table><div align="center"><img src="" width="0" height="0" id="uploadImg"/></div></s:form><iframe name="frame" style="display:none"  src="_self"></iframe></body></html>
下面是上传图片和下载图片方法
/*** 方法名:upLoadImage* 作者: * 描述: 在信息内容编辑区上传图片到数据库* @return* @throws Exception* 日期:2010-4-20*/public String upLoadImage() throws Exception{       if (null != image) {          //上传图片                   infoImage = new InfoContentImage();             String imageName = imageFileName; // 文件真名             String imageType = imageContentType;             Long length = image.length(); // 文件的真实大小             // 设定InfoAttach对象的属性             infoImage.setInfotypeid(new Long(infotypeid));             infoImage.setImagename(imageName);             infoImage.setImagetype(imageType);             infoImage.setImagesize(length);             infoImage.setDate(new Date());             // 将上传的文件保存到数据库             try {                   InputStream is = new BufferedInputStream(new FileInputStream(image));                   ByteArrayOutputStream os = new ByteArrayOutputStream();                   int len = 0;                   byte[] content = new byte[is.available()];                   while (-1 != (len = is.read(content))) {                      os.write(content);                   }                   infoImage.setImagecontent(os.toByteArray());                   is.close();                   os.close();             } catch (Exception e) {                   e.printStackTrace();             }       }             Long generatedId = this.infoService.saveInfoContentImage(infoImage);this.writeMessage("<script type='text/javascript'>parent.finish('"+ generatedId +"');</script>");return null;}/*** 方法名:downloadImage* 作者: * 描述:* @return* @throws Exception* 日期:2010-4-21*/public String downloadImage() throws Exception{// 设置下载头文件HttpServletResponse response = this.getResponse();response.setCharacterEncoding("UTF-8");response.setContentType("image/*");OutputStream output = response.getOutputStream();infoImage = infoService.getInfoContentImageById(imageId);byte[] b = infoImage.getImagecontent();output.write(b);return null;} 修改打开上传窗口可以打开多个和打开的窗口不居中的原因，修改原来的image.js
{type:'button',id:'myUpload',align:'center',label:'新上传 ',onClick:function(){var thisDialog = this.getDialog(); var txtUrlObj = thisDialog.getContentElement('info', 'txtUrl'); var txtUrlId = txtUrlObj.getInputElement().$.id; var retFile = window.open("info2j.zrx?path=info/info_uploadImage&infotypeid="+top.document.getElementById('infotypeid').value+"&txtUrlId="+txtUrlId, "上传图片", "height=300, width=400,top="+(screen.height-300)/2+",left="+(screen.width-400)/2); if(retFile != null){this.getDialog().setValueOf('info','txtUrl',retFile);}}},

		自动登录	找回密码
密码			立即注册

ckedit上传图片到数据库

浏览过的版块