`

CKEditor文件上传-多种方式-自定义上传-保存在项目外

 
阅读更多

本文介绍2种使用ckeditor上传文件保存至项目外(即硬盘)的方法。

环境:tomcat + spring

第一种:CKEditor文件上传-多种方式-与ckfinder结合上传

第二种:使用自己写的上传方法。

 

 

下面我们来说说第二种方法的实现:

1.Action中的方法

/**
	 * 使用ckeditor编辑器 上传图片[保存至本地硬盘-项目外]
	 * 
	 * @param m
	 * @param request
	 * @param response
	 * @return
	 */
	@RequestMapping(value = "/doCkeditorUpload", method = RequestMethod.POST)
	public String doCkeditorUpload(Model m,
			MultipartHttpServletRequest request, HttpServletResponse response)
			throws IOException {
		String url = "";
		try {
			Iterator<String> iterator = request.getFileNames();
			while (iterator.hasNext()) {
				String next = iterator.next();
				List<MultipartFile> files = request.getFiles(next);
				for (MultipartFile file : files) {
						String name = file.getOriginalFilename();
						String type = FileUploadUtil.getType(name);
						String fileId = UUID.randomUUID().toString();
						String newName = fileId + "." + type;
						
						//写入文件
						StringBuffer filePath = new StringBuffer();
						filePath.append(FileUploadUtil.filePath);
						filePath.append(FileUploadUtil.getRelativePath(
								"ckeditor", type));
						FileUploadUtil.checkFile(filePath.toString());
						FileOutputStream fos = null;
						fos = new FileOutputStream(filePath + newName);
						fos.write(file.getBytes());
						fos.flush();
						fos.close();

						//保存至外部
						url=request.getContextPath() + "/system/attachment/fileUpload/getCkeditorFile.htm?type="+type+"&fileId="+fileId;
						
						//保存至内部
						//url = FileUploadUtil.getUrl("xheditor", type, newName);
						//url = request.getContextPath() + "/files" + url;
						response.setContentType("text/html; charset=UTF-8");
						response.setHeader("Cache-Control", "no-cache");
						PrintWriter out = response.getWriter();
						String callback = request
								.getParameter("CKEditorFuncNum");
						out.println("<script type=\"text/javascript\">");
						out.println("var parentWindow = ( window.parent == window ) ? window.opener : window.parent;");
						out.println("parentWindow.CKEDITOR.tools.callFunction("
								+ callback + ",'" + url + "',''" + ")");
						out.println("</script>");
						out.flush();
						out.close();
					}
			}
		} catch (Exception e) {
			url = "";
			e.printStackTrace();
		}
		return null;
	}

	/**
	 * 获取文件流
	 * @param request
	 * @param response
	 * @return
	 * @throws Exception
	 */
	@RequestMapping(value = "/getCkeditorFile")
	public String getCkeditorFile(HttpServletRequest request,
			HttpServletResponse response) throws Exception {
		String type = request.getParameter("type");
		String fileId = request.getParameter("fileId");
		
		response.reset();
		response.addHeader("Content-Disposition", "attachment;filename="
				+ URLEncoder.encode(fileId+"."+type, "UTF-8"));
		response.setContentType("application/octet-stream");
		if (isNotBlank(fileId) && isNotBlank(type)) {
			//写出文件
			StringBuffer filePath = new StringBuffer();
			filePath.append(FileUploadUtil.filePath);
			filePath.append(FileUploadUtil.getRelativePath(
					"ckeditor", type));
			String fileName = fileId+"."+type;
			
			File file = new File(filePath+fileName);
			FileInputStream is = new FileInputStream(file);
			int i = -1;
			try {
				while ((i = is.read()) != -1) {
					response.getWriter().write(i);
				}
			} catch(Exception e){
				e.printStackTrace();
			}finally {
				is.close();
			}
			response.getWriter().flush();
		}
		return null;
	}

 2.页面如何调用,把值传回至编辑域

 

    在ckeditor config.js中配置上传路径CKEDITOR.editorConfig

   

/*自定义上传*/
	config.filebrowserUploadUrl = getRootPath()+'/attachment/doCkeditorUpload.do?type=file';  
	config.filebrowserImageUploadUrl = getRootPath()+'/attachment/doCkeditorUpload.do?type=image';  
	config.filebrowserFlashUploadUrl = getRootPath()+'/attachment/doCkeditorUpload.do?type=flash';  

 

 

 

如此则大功告成,保存在项目外硬盘内,方便项目维护。

如果您想通过ckeditor结合ckfinder上传,请参看《 CKEditor文件上传-多种方式-与ckfinder结合上传

如有不足,欢迎指正!

分享到:
评论

相关推荐

    ckeditor-java-core-3.5.3

    它提供了丰富的文本格式化选项,包括字体、大小、颜色、对齐方式等,并支持图片上传、链接插入、表格编辑等多种功能。CKEditor的用户界面友好,易于使用,且高度可定制。 2. **Java集成** "ckeditor-java-core-...

    ckeditor-java-3.6.2

    5. **处理上传文件**:"WEB-INF"目录下的配置文件和类可能包含了处理CKEditor上传文件的逻辑,如图片或附件上传。开发者需要在后端处理这些请求,保存文件并返回成功或失败的反馈。 6. **样例测试**:"_samples...

    django-ckeditor-master.zip

    - **图片上传**:CKEditor支持本地文件上传,可以通过配置设置上传策略,如限制大小、类型等。 - **插件系统**:CKEditor有丰富的插件库,可以扩展其功能,例如添加数学公式编辑、地图插入等。 - **多语言支持**:...

    ckeditor_aspnet_3.6.4

    CKEditor是一款广泛应用于Web开发中的开源富文本编辑器,它为用户提供了一种在网页上进行内容编辑的便捷方式。在.NET环境下,CKEditor被封装成了一个控件,使得ASP.NET开发者能够轻松集成到他们的应用程序中,提供...

    net ckeditor 带视频上传

    4. **自定义上传位置**:在.NET环境中,开发者需要在服务器端编写代码来处理视频文件的保存。这通常包括设置一个上传目录,确保该目录可写,以及使用如System.IO命名空间下的类(如FileInfo、DirectoryInfo等)来...

    PHPMyWind更换编辑器ckeditor批量上传图片

    1. 下载并解压CKEditor文件,将其放置在项目适当位置。 2. 在后台编辑页面引入CKEditor,并配置图片浏览和上传的URL。 3. 创建处理图片上传的PHP脚本。 4. 配置CKEditor启用CKFinder插件,实现批量上传功能。 遵循...

    ckeditor皮肤-office2013

    CKEditor是一款广泛使用的开源富文本编辑器,它允许用户在网页上进行文本编辑,具有丰富的功能和高度可定制性。"ckeditor皮肤-office2013"是一个专为CKEditor设计的皮肤,旨在使其外观和感觉与流行的Microsoft ...

    c# mvc中使用ckeditor上传图片介绍

    在C# MVC应用中,集成CKEditor以实现图片上传功能是一项常见的需求,它允许用户在网页编辑器中方便地插入和管理图片。...记得在实际项目中,还需要考虑安全性问题,如验证文件类型、大小以及防止恶意文件上传。

    ASP+Ckeditor上传图片配置Demo和文档说明

    - 图片上传应考虑安全问题,例如防止恶意文件上传、限制文件类型和大小,以及对上传文件进行重命名以避免覆盖已有文件。 - 为了优化性能,可以考虑使用异步上传,或者使用云存储服务如AWS S3或Azure Blob Storage...

    ckeditor 图片上传

    - 图片上传插件:可以使用CKEditor的内置`FileUpload`插件,或者自定义上传逻辑。 - 文件读取:使用HTML5的`FileReader` API预览选定的图片。 - 数据转换:将图片数据转换为Base64编码,以便通过Ajax发送到服务器...

    ckeditor整合图片上传

    4. 权限控制:确保只有授权用户才能上传图片,防止恶意文件上传。 5. 存储策略:考虑使用云存储服务,如阿里云OSS或AWS S3,以提高可扩展性和安全性。 通过以上步骤,你可以在CKEditor中成功整合图片上传功能,提升...

    ckeditor-前端组件

    - **图片上传**:CKFinder是一款与CKEditor配套的文件管理器,可实现图片和文件的上传、管理。 - **与后端接口对接**:CKEditor编辑的内容通常需要保存到服务器,需要编写对应的接口处理富文本数据。 总的来说,...

    ckeditor_4.8.0 asp.net源码

    此外,如果需要使用到上传功能,还需要配置文件上传的处理逻辑和服务器的临时目录。 总的来说,CKEditor 4.8.0 asp.net源码是一个强大且灵活的富文本编辑解决方案,能够轻松地嵌入到ASP.NET应用中,提供丰富的文本...

    ckeditor5 全功能版(纯手工编译)

    它提供了多种内置工具,包括文本格式化、图片上传、链接创建、表格插入、列表操作等。此外,它支持实时预览,使得用户在编辑时就能看到最终的排版效果。CKEditor 5 还有强大的富媒体集成能力,可以轻松插入视频、...

    适用于帝国后台的ckeditor的行间距行高lineheight插件

    3. 将解压后的文件上传至帝国CMS系统中的CKEditor插件目录,一般为`/static/ckeditor/plugins/`目录下。 4. 登录帝国后台,进入CKEditor的配置界面,添加lineheight插件到已启用插件列表中,这通常需要编辑`config....

    Laravel开发-laravel-ckeditor

    CKEditor是一款流行的富文本编辑器,提供了多种编辑选项,如字体、样式、图像上传、链接管理等,使得在网页上创建和编辑复杂内容变得轻松易行。 要开始使用`laravel-ckeditor`,首先需要将其添加到Laravel项目的...

    ckeditor上传图片完善版

    服务器端脚本需要处理文件上传请求,验证文件类型和大小,然后保存到指定目录并返回URL给CKEditor。 5. **前端技术**:前端部分通常使用JavaScript(可能包含jQuery库)来处理用户交互,如监听文件选择事件、发送...

    ckeditor 4.16 asp.net C# 从word中粘贴复制图片,多文件上传等

    在本项目中,我们关注的是CKEditor 4.16版本与ASP.NET C#的集成,特别是如何处理从Word中复制粘贴的图片以及实现多文件上传的功能。 首先,"ckeditor"是CKEditor的核心部分,它是一个JavaScript库,提供了丰富的...

    django-ckeditor

    1. **自定义配置**:可以通过 CKEditor 的配置参数,调整编辑器的行为,如工具栏按钮、文件上传设置等。 2. **图片和文件管理**:Django CKEditor 可以集成文件和图片管理器,便于用户在编辑器内上传和管理媒体资源...

Global site tag (gtag.js) - Google Analytics