ckedit下传图片到数据库
日期：2014-05-16 浏览次数：20633 次
?
?
?
?
?
?
?
?
?最近要实现在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
