ckedit上传图片到数据库
http://dl.iteye.com/upload/attachment/237537/f27a9e08-2b70-3bd8-ae1d-51e9ca065222.jpghttp://dl.iteye.com/upload/attachment/237539/0b9f1464-5955-331e-9ac6-4cb6255b5bbc.jpg
http://dl.iteye.com/upload/attachment/237541/73c294f4-720a-37d5-bf7c-12dac0c720f1.jpg
http://dl.iteye.com/upload/attachment/237543/b441b56e-edea-34d3-8315-b2349ca59b7e.jpg
http://dl.iteye.com/upload/attachment/237545/fb176ce6-5f26-3516-ae3e-dbcde294037b.jpg
http://dl.iteye.com/upload/attachment/237547/617b1d2a-fd55-3158-a43a-2251e03e3a62.jpg
http://dl.iteye.com/upload/attachment/237549/639bee12-b2d1-3f90-8f69-0c61a72852bd.jpg
最近要实现在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.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; 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);}}},
页:
[1]