您的位置:首页 > 数据库

CKEditor中上传图片传到数据库的一个比较取巧的方法

2016-05-23 00:00 465 查看
最近给同学改毕业设计,用到了CKEditor。就CKEditor来说,功能确实很强大。但是我遇到的一个问题是,当我在CKEditor上传图片时,写到数据库的数据是这样的:


<p><img alt="" src="/Ebuy/img/uploadImg/魅族MX3  RE版 1.jpg" style="height:440px; width:790px" />
<img alt="" src="/Ebuy/img/uploadImg/魅族MX3  RE版 2.jpg" style="height:1836px; width:790px" /></p>

上传文件的类文件关键代码是这样的:
String callback = request.getParameter("CKEditorFuncNum");
String expandedName = ""; // 文件扩展名
if (uploadContentType.equals("image/pjpeg")
|| uploadContentType.equals("image/jpeg")) {
// IE6上传jpg图片的headimageContentType是image/pjpeg,而IE9以及火狐上传的jpg图片是image/jpeg
expandedName = ".jpg";
} else if (uploadContentType.equals("image/png")
|| uploadContentType.equals("image/x-png")) {
// IE6上传的png图片的headimageContentType是"image/x-png"
expandedName = ".png";
} else if (uploadContentType.equals("image/gif")) {
expandedName = ".gif";
} else if (uploadContentType.equals("image/bmp")) {
expandedName = ".bmp";
} else {
out.println("<script type=\"text/javascript\">");
out.println("window.parent.CKEDITOR.tools.callFunction(" + callback
+ ",''," + "'文件格式不正确(必须为.jpg/.gif/.bmp/.png文件)');");
out.println("</script>");
return null;
}
/*取消600k的限制
if (upload.length() > 600 * 1024) {
out.println("<script type=\"text/javascript\">");
out.println("window.parent.CKEDITOR.tools.callFunction(" + callback+ ",''," + "'文件大小不得大于600k');");
out.println("</script>");
return null;
}
*/
InputStream is = new FileInputStream(upload);
//图片上传路径
File directory = new File("");// 参数为空
String courseFile = directory.getCanonicalPath();
String uploadPath = ServletActionContext.getServletContext().getRealPath("/img/uploadImg");
//取消时间+UUID方式命名
/*String realPath="\\images\\productdetailImages\\";*/
//String uploadPath="D:\\xiaoxuebishe\\Ebuy\\WebContent\\images\\productdetailImages\\";
/*System.out.println(uploadPath);*/
//String fileName = java.util.UUID.randomUUID().toString(); // 采用时间+UUID的方式随机命名
String fileName = uploadFileName;
File file = new File(uploadPath);

if (!file.exists()) { // 如果路径不存在,创建
file.mkdirs();
}

File saveFile=new File("D:\\xiaoxuebishe\\Ebuy\\WebContent\\images\\productdetailImages\\",uploadFileName);
FileUtils.copyFile(upload, saveFile);

File toFile = new File(uploadPath, fileName);
OutputStream os = new FileOutputStream(toFile);
byte[] buffer = new byte[1024];
int length = 0;
while ((length = is.read(buffer)) > 0) {
os.write(buffer, 0, length);
}
is.close();
os.close();

// 返回"图像"选项卡并显示图片  request.getContextPath()为web项目名
out.println("<script type=\"text/javascript\">");
out.println("window.parent.CKEDITOR.tools.callFunction(" + callback
+ ",'" + request.getContextPath() + "/img/uploadImg/" + fileName + "','')");
out.println("</script>");
return null;

(请忽略其实尚未处理的绝对路径)
这其中更改上传路径时会导致无法预览(我不会修改预览路径)和上传后无法显示等问题,在网上找了很多方法,发现写这方面的文章和资料极少(这也是我写这篇文章的原因,事实上,这是我第一次发这种文章),当然,其中有一篇文章提出了一个解决方法,在这里贴出链接:http://blog.163.com/prevBlogPerma.do?host=ytrtfhj@126&srl=890531092010226023136&mode=prev

由于小弟才疏学浅,可能这个方法解决得并不好,所以如果本文所提出的方法不能解决问题,请参考上面的方法。

接着上面的讲,相对于网上其他讲CKEditor上传图片的方法的代码,我多写了两行,即:


File saveFile=new File(“D:\xiaoxuebishe\Ebuy\WebContent\images\productdetailImages\”,uploadFileName);

FileUtils.copyFile(upload, saveFile);

正如各位所见,这是将上传的文件复制了一份到自己的项目的目录(请再次忽略其中尚未处理的绝对路径)。

接下来,跟上面贴出的那篇文章不同,我的思路是,在把数据传到数据库的途中拦截到写到数据库的数据并修改,于是就有了如下写在ProductAction.java中的关键代码:

ProductAction.java中的关键代码:
if (product.getDescription().equals(null) || "".equals(product.getDescription())) {
//如果管理员没有输入商品详情,为避免空指针异常,需要作以上条件判断
} else {

4000
String description = product.getDescription();

String newPath = "images/productdetailImages";//更改为工程中的:images/productdetailImages
description = description.replace(oldPath2, newPath);//进行替换
product.setDescription(description);//把新的description加入到product对象中
}


该方法完美通过将CKEditor上传的图片传到数据库的测试。容易看出,图片分别上传到了服务器和项目目录,只不过在前端显示的时候调用的是项目里的图片。但是在真正的应用中,其实并不需要这么做,因为将图片上传到项目中会导致项目在文件大小上过大。

不过在做毕业设计等未上传到真正服务器的项目时,会需要很好的电脑间移植性。本文也算是一个满足该需求较为讨巧的方法吧,希望能给有相同需求的朋友一点帮助。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息