`
fftiger
  • 浏览: 11673 次
  • 性别: Icon_minigender_1
社区版块
存档分类

xheditor 上传功能的实现

 
阅读更多

xheditor 是一款比较好用的文本编辑器,具体如何使用这里不在说了,网上有很多,也可以查看自带demos文件。这里说说文件的上传。
页面

<script type="text/javascript" src="<c:url value="/js/jquery.js"/>"></script>
<script type="text/javascript" src='<c:url value="/xheditor/xheditor-1.2.2.min.js"/>'></script>
<script type="text/javascript" src='<c:url value="/xheditor/xheditor_lang/zh-cn.js"/>'></script><%--中文显示--%>

<textarea id="editor01" rows="40" cols="80" name="XXX" class="w_all" >编辑</textarea><%--w_al 是所有的功能--%>

  


js注意之前要导jquery的js文件,

/*
upFile 表示上传地址
这里面一定要把:html5Upload : false,不然action无法获取数据
*/

$(document).ready(function() {
$('#editor01').xheditor({
html5Upload : false,
upMultiple : '1',
upLinkUrl : "upFile?immediate=1",
upLinkExt : "zip,rar,txt",
upImgUrl : "upFile?immediate=1",
upImgExt : "jpg,jpeg,gif,png",
upFlashUrl : "upFile?immediate=1",
upFlashExt : "swf",
upMediaUrl : "upFile?immediate=1",
upMediaExt : "avi"
});
});

 
java代码;采用struts2

import java.io.File;
import java.io.IOException;
import java.util.UUID;
import org.apache.commons.io.FileUtils;
import org.apache.struts2.ServletActionContext;
import com.opensymphony.xwork2.ActionSupport;


public class UpFile extends ActionSupport {
	//文件名必须是filedata,因为xheditor的name值为filedata

        private File filedata;
	private String filedataContentType;

	private String filedataFileName;

	/**
	 * 上传文件
	 */
		public String execute() {
			String saveRealFilePath = ServletActionContext.getServletContext()
					.getRealPath("/upload");//保存上传资料的目录
			File fileDir = new File(saveRealFilePath);
			
			/**
			 * 如果文件夹不存在创建一个文件夹
			 */
			if (!fileDir.exists()) {
				fileDir.mkdirs();
			}
			/**
			 * 判断文件名是否存在
			 */
			if (filedataFileName == null)
				return null;
			/**
			 * 随机生成一同类型,文件名不重复的文件
			 */
			String newName = UUID.randomUUID()
					+ filedataFileName.substring(filedataFileName.lastIndexOf("."));
			File savefile = new File(saveRealFilePath + "/" + newName);
			try {
				// 复制文件
				FileUtils.copyFile(filedata, savefile);
                               //回写json数据
				ServletActionContext.getResponse().getWriter()
						.println(getJson("", "/upload/" + newName));
				;
			} catch (IOException e) {
				throw new RuntimeException(e);
			}
	
			return null;
		}

	public File getFiledata() {
		return filedata;
	}

	public String getFiledataContentType() {
		return filedataContentType;
	}

	public String getFiledataFileName() {
		return filedataFileName;
	}
	/**
	 * 获取返回json数据
	 * @param err
	 * @param newFileName
	 * @return
	 */
public String getJson(String err, String newFileName) {
//json的格式很重要**
	return "{\"err\":\"" + err + "\",\"msg\":\""
			+ ServletActionContext.getRequest().getContextPath()
			+ File.separatorChar + newFileName + "\"}";
}

	public void setFiledata(File filedata) {
		this.filedata = filedata;
	}

	public void setFiledataContentType(String filedataContentType) {
		this.filedataContentType = filedataContentType;
	}

	public void setFiledataFileName(String filedataFileName) {
		this.filedataFileName = filedataFileName;
	}
}

 

 

 

分享到:
评论

相关推荐

    xhEditor struts2实现图片上传

    本文将详述如何使用xhEditor与Struts2框架相结合,实现图片上传功能。xhEditor是一款开源的JavaScript富文本编辑器,它提供了丰富的编辑功能,如字体样式设置、颜色调整、图片和文件上传等。而Struts2则是一个强大的...

    xheditor编辑器实现图片上传

    本篇文章将详细讲解如何结合JQuery和JSP实现XHEditor的图片上传功能。 首先,我们需要了解XHEditor的基本用法。XHEditor是基于jQuery的,因此在项目中必须先引入jQuery库。在HTML页面中,通过`&lt;script&gt;`标签引入...

    ASP.NET应用Xheditor上传图片 jquery-1.11.0

    在ASP.NET中实现Xheditor的图片上传功能,一般会涉及以下步骤: 1. **配置Xheditor**:在HTML页面中引入Xheditor的JavaScript和CSS文件,并设置编辑器的配置项,如工具栏、皮肤等。其中,需要配置图片上传的相关...

    xhEditor文件上传的Java实现.pdf

    xhEditor文件上传的Java实现提供了一种灵活、易用的在线富文本编辑器解决方案,支持图片上传、文件上传等多种功能。开发者可以根据需要,选择合适的编辑器插件和参数设置,实现个性化的编辑器功能。

    JQuery+XHEditor例子(含上传)

    本实例将详细介绍如何在项目中集成和使用XHEditor,以及实现文件上传功能。 首先,**XHEditor** 是一个高效且强大的富文本编辑器,它提供了许多常见的编辑功能,如字体样式、颜色设置、插入图片和链接等。由于其...

    在xheditor在线编辑器下,ASP提交远程图片自动上传到服务器

    本话题主要关注如何在XHEditor在线编辑器下,通过ASP(Active Server Pages)实现远程图片的自动上传到服务器的功能。 首先,XHEditor是一款强大的JavaScript富文本编辑器,它提供了丰富的编辑功能,如文字格式化、...

    xheditor 在线编辑器jsp/ava实现版

    通过内置的上传功能,用户无需离开编辑器界面就能完成图片的上传,提高了工作效率。 **视频上传**功能进一步扩展了xheditor的能力,使得用户可以将本地视频文件嵌入到文档中,为内容创作提供了更多可能。视频上传...

    xheditor jsp完整实例

    【xheditor jsp完整实例】是一个基于XHEditor的Web富文本编辑器的应用示例,主要用于在Java服务器页面(JSP)上实现用户友好的文本编辑功能。XHEditor是一款开源的JavaScript富文本编辑器,它提供了丰富的API和...

    xheditor集成struts2上传图片

    本案例涉及的是将xheditor富文本编辑器与Struts2框架整合,实现图片上传功能。xheditor是一款强大的JavaScript在线编辑器,提供了丰富的文本编辑功能,而Struts2是一个流行的Java Web框架,用于构建MVC(模型-视图-...

    xhEditor在线编辑器完整实例

    它包含了xhEditor的核心功能,如文本格式化、图片上传、链接插入等,开发者可以通过它深入理解编辑器的工作原理并进行自定义扩展。 xhEditor的特点包括但不限于: - **多语言支持**:xhEditor支持多种语言,便于...

    xhEditor资料与文档

    在网页上实现类似QQ的表情插入功能,xhEditor提供了一个简单而高效的方式。下面将详细介绍xhEditor的主要特点、功能以及如何实现表情插入等操作。 1. **主要特点** - **轻量级**: xhEditor体积小巧,加载速度快,...

    HTML 在线编辑xheditor

    - **事件监听**:利用API接口监听编辑器的事件,如内容改变、图片上传等,以实现特定功能。 **3. 示例与实践** xheditor压缩包内通常包含示例文件,这些文件展示了如何在实际项目中使用编辑器。通过查看和运行示例...

    xheditor 源代码

    3. **上传功能**:xheditor内置了图片和文件上传功能,但需要开发者配置服务器端的上传接口以完成实际的文件存储。 五、总结 xheditor以其简洁的API、丰富的功能和高度的可扩展性,成为了许多Web开发者在构建富...

    xheditor1.1.14

    在这款小巧而功能强大的编辑器中,开发者可以为网站用户提供类似于Microsoft Word的编辑体验,实现文字编辑、格式化、图片上传、链接插入等多种功能。本文将深入探讨XHEditor1.1.14的核心特性、使用方法以及常见问题...

    xheditor-1.1.14

    参数值:接收用户上传的服务器端程序URL,默认留空为禁用超链接上传功能,具体使用方法请参考demo8演示文件 注:可使用内置变量:{editorRoot},代表当前编辑器的根路径,例:{editorRoot}upload.php upLinkExt:...

    xheditor-1.2.2.zip

    1. **简洁的API接口**:XHEditor 1.2.2提供了一套简单易懂的API接口,开发者可以方便地进行功能扩展和定制,实现与后端数据的交互。 2. **丰富的编辑功能**:包括文本格式化、字体调整、段落处理、图片上传、超链接...

    xheditor-1.1.6

    3. **高度可定制**:xheditor允许开发者自定义工具栏,根据项目需求选择合适的编辑功能,实现个性化配置。 4. **兼容性好**:全面支持主流浏览器,确保在不同环境下都能稳定运行。 5. **安全可控**:提供防XSS攻击...

    xheditor的使用

    总的来说,XHEditor是一个功能强大的富文本编辑器,它提供的API和示例可以帮助开发者轻松地在项目中实现文本编辑功能。通过深入研究和实践,你可以熟练地运用XHEditor来提升用户体验,打造专业的Web内容编辑平台。

    最新版本xheditor-v1.2.2

    4. **插件化设计**: 具有良好的扩展性,可以通过安装插件来实现更多高级功能,如图片上传、视频插入等。 5. **支持多种编辑模式**: 可切换为源代码模式、可视化模式和预览模式,满足不同用户需求。 6. **完善的API...

Global site tag (gtag.js) - Google Analytics