用ckeditor实现图片上传

来源：互联网发布：js array item 编辑：程序博客网时间：2024/05/17 22:01

很感谢http://blog.163.com/ytrtfhj@126/blog/static/890531092010226023136/的作者

ckeditor基本上都用过，一些基本配置我就不多说了，不太清楚的看上面的那篇文章。

在编辑文章时，很多时候都要在文章中插入图片，ckeditor本身带有插入图片的功能，但只能用网络上的图片资源，而没有图片上传的功能。现在就来实现ckeditor图片上传的功能。我用上面的方法试验过，但有一点点问题，经过修改运行成功！

我贴我的代码吧：

发表文章页面：

<tr><td id="article" colspan="2"><textarea id="content"name="articleContent" class="ckeditor" rows="2" cols="20"style="width: 500px;"></textarea> <scripttype="text/javascript">CKEDITOR.replace('content',addUploadButton(this));function addUploadButton(editor) {CKEDITOR.on('dialogDefinition',function(ev) {var dialogName = ev.data.name;var dialogDefinition = ev.data.definition;if (dialogName == 'image') {var infoTab = dialogDefinition.getContents('info');infoTab.add({type : 'button',id : 'upload_image',align : 'center',label : '上传',onClick : function(evt) {var thisDialog = this.getDialog();var txtUrlObj = thisDialog.getContentElement('info','txtUrl');var txtUrlId = txtUrlObj.getInputElement().$.id;addUploadImage(txtUrlId);}},'browse'); //place front of the browser button}});}function addUploadImage(theURLElementId) {//这是我自己的处理文件/图片上传的页面URLvar uploadUrl ="<%=path%>/page/admin/article/uploadsFiles.jsp";var imgUrl = window.showModalDialog(uploadUrl);//在upload结束后通过js代码window.returnValue=...可以将图片url返回给imgUrl变量。//更多window.showModalDialog的使用方法参考 var urlObj = document.getElementById(theURLElementId);urlObj.value = imgUrl;urlObj.fireEvent("onchange"); //触发url文本框的onchange事件，以便预览图片}</script></td></tr>

uploadFile.jsp：

<body>              <form action="${path}/admin_article_uploadImage.action" method="POST" name="pos"enctype="multipart/form-data" target="smz">           <iframe name="smz" width="0" height="0" frameborder="0"style="display: none">       </iframe>           <table width="80%" border="1" cellspacing="0" cellpadding="0">              <tr>                  <td width="20%" align="right">                     <font color="red">*</font>上传图片文件                  </td>                  <td width="20%">                     <input type="file" name="videoFile"/>                     <input type="submit" value="上传"/></tr>           </table>       </form>     <input type="hidden" name="pagePath" id="_page_path"  />  </body>

uploadImageSuccess.jsp：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>    <script type="text/javascript">window.onload = function(){//var _page_path =parent.document.getElementById("_page_path").setAttribute('value','${imageURL}');var _page_path = '${imageURL}';if (null != _page_path && "" != _page_path) {parent.window.returnValue = _page_path;parent.window.close();}};</script>

struts配置文件：

<action name="admin_article_*" class="articleAction" method="{1}"><result name="uploadImage">/page/admin/article/uploadImageSuccess.jsp</result> <result name="error">/error.jsp</result><result name="input">/error.jsp</result></action>

action代码：

/** * 上传图片 * @Author xiaobc * 2013-7-17 * @return */public String uploadImage(){try {String imageURL = SiteUtil.uploadImage(videoFile, videoFileFileName);ServletActionContext.getRequest().setAttribute("imageURL", imageURL);System.out.println("uploadImage..............");return "uploadImage";} catch (Exception e) {e.printStackTrace();return ERROR;}}

SiteUtil.java代码：（文章上传的工具类）

/** * 将文件转换成数据库中存储的路径 *  * @param f *            需要转换的文件 * @param 文件名字 * @return 文件网络路径 */public static String uploadImage(File f, String fName) {String pre = ServletActionContext.getServletContext().getRealPath("/page/upload/image");String predate = new SimpleDateFormat("yyyy-MM-dd").format(new Date());String prefix = pre + File.separator + predate;File saveFile = new File(prefix, fName);if (!saveFile.getParentFile().exists()) {// 文件夹不存在则创建文件夹saveFile.getParentFile().mkdirs();}try {FileUtils.copyFile(f, saveFile);// 文件复制} catch (Exception e) {throw new RuntimeException(e);}return "page/upload/image/" + predate + "/" + fName;}