ckedit上传图片到数据库
最近要实现在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="上传" onclick="upload()"/></td>
<td><input type="button" value="取消" onclick="javascript:window.close();"/></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);}}},