用ckeditor实现图片上传

最新推荐文章于 2024-04-12 16:55:58 发布

xiaobc1234

最新推荐文章于 2024-04-12 16:55:58 发布

阅读量664

点赞数

分类专栏： java web ssh 文章标签： ckeditor Path 图片网络

本文链接：https://blog.csdn.net/xiaobc1234/article/details/9565167

版权

ssh 同时被 3 个专栏收录

12 篇文章 0 订阅

订阅专栏

java

10 篇文章 0 订阅

订阅专栏

web

7 篇文章 0 订阅

订阅专栏


很感谢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> <script
									type="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) {
										//这是我自己的处理文件/图片上传的页面URL
											var 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;
	}

xiaobc1234

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
用ckeditor实现图片上传

很感谢http://blog.163.com/ytrtfhj@126/blog/static/890531092010226023136/的作者ckeditor基本上都用过，一些基本配置我就不多说了，不太清楚的看上面的那篇文章。在编辑文章时，很多时候都要在文章中插入图片，ckeditor本身带有插入图片的功能，但只能用网络上的图片资源，而没有图片上传的功能。现在就来实现ckeditor图片
复制链接

扫一扫