java ckeditor 上传图片_java版ckeditor上传图片到数据库

最近要实现在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)},后面加上这些代码：

Java代码

{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的简单代码

Html代码

上传图片

function checkFormat(filePath){

vari=filePath.lastIndexOf(".");

varlen=filePath.length;

varstr=filePath.substring(i+1,len);

varextName="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

varimageUrl=document.getElementById("txtUrlId").value;

alert("！");

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();

}

enctype="multipart/form-data"target="frame">