废话不说了,直接上代码,代码比较乱,紧体现xheditor与struts2上传,
第一步:
到官网下载最新版本xheditor插件,或者从附件中下载
第二步:jsp页面
注意:jsp中 代码 html5Upload:false,upMultiple:'1' 这块很重要,屏蔽掉html5上传,现在大部分是IE6,8。IE9才支持html5,其他浏览器百度去
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
basePath = basePath.substring(0, (basePath.lastIndexOf("/") == basePath.length() - 1) ? basePath.lastIndexOf("/") : basePath.length());
session.setAttribute("basePath",basePath+"/");
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script src="<%=basePath %>/scripts/xheditor/jquery/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="<%=basePath %>/scripts/xheditor/xheditor-1.1.14-zh-cn.min.js" charset="utf-8" type="text/javascript"></script>
</head>
<body>
<textarea id="elm1" name="elm1" style="width:860px;height:180px;background:url(img/demobg.jpg) no-repeat right bottom fixed">Hello xhEditor!<br />拖动你电脑中的图片到这里,体验HTML5批量拖放上传的强大功能</textarea><br /><span style="color:#ccc;">编辑区域中按快捷键Ctrl+Enter提交表单</span><br /><br />
</body>
<script type="text/javascript">
jQuery(document).ready(function(){
$(pageInit);
var editor;
function pageInit()
{
editor=$('#elm1').xheditor({html5Upload:false,upMultiple:'1',upLinkUrl:'demos/upload.php?immediate=1',upImgUrl:'/struts1_xheditor/upload.do?immediate=1',upFlashUrl:'demos/upload.php?immediate=1',upMediaUrl:'demos/upload.php?immediate=1',localUrlTest:/^https?:\/\/[^\/]*?(xheditor\.com)\//i,remoteImgSaveUrl:'demos/saveremoteimg.php',emots:{
msn:{name:'MSN',count:40,width:22,height:22,line:8},
},loadCSS:'<style>pre{margin-left:2em;border-left:3px solid #CCC;padding:0 1em;}</style>',shortcuts:{'ctrl+enter':submitForm}});
}
function submitForm(){$('#frmDemo').submit();}
});
</script>
</html>
第三步:java代码
package com.bjsxt.struts2.path.action;
import java.io.File;
import java.io.IOException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts2.ServletActionContext;
import com.opensymphony.xwork2.ActionContext;
public class PathAction {
protected HttpServletRequest request;
protected HttpServletResponse response;
private File filedata;
private String filedataContentType;
private String filedataFileName;
private String err;
private String msg;
private String message;
private String fileExt = "jpg,jpeg,gif,bmp,png";
public String execute() throws IOException {
ActionContext context = ActionContext.getContext();
HttpServletResponse response = (HttpServletResponse) context
.get(ServletActionContext.HTTP_RESPONSE);
// 这里可以获得file
File file = this.getFiledata();
System.out.print(file);
// 接下来就是上传的事情了,
// 接下来的事情,就是把文件写到服务器,至于怎么写,这应该不用说了吧…………大家多思考,多插资料,多动手
// 这里注意的是,返回的时候,返回json格式的,自己拼或者jsonObject都可以,如果错误就写在err里面,msg写上传的路径,xheditor会接受这个路径然后插入编辑器中
// 如果返回地址有半角 叹号,直接确定
response.getOutputStream().print("{\"err\":\"\",\"msg\":\"!111.jpg\"}");
return null;
}
public File getFiledata() {
return filedata;
}
public void setFiledata(File filedata) {
this.filedata = filedata;
}
public String getFiledataContentType() {
return filedataContentType;
}
public void setFiledataContentType(String filedataContentType) {
this.filedataContentType = filedataContentType;
}
public String getFiledataFileName() {
return filedataFileName;
}
public void setFiledataFileName(String filedataFileName) {
this.filedataFileName = filedataFileName;
}
public String getErr() {
return err;
}
public void setErr(String err) {
this.err = err;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
}
public String getFileExt() {
return fileExt;
}
public void setFileExt(String fileExt) {
this.fileExt = fileExt;
}
public HttpServletRequest getRequest() {
return request;
}
public void setRequest(HttpServletRequest request) {
this.request = request;
}
public HttpServletResponse getResponse() {
return response;
}
public void setResponse(HttpServletResponse response) {
this.response = response;
}
}
分享到:
相关推荐
在Action执行完成后,我们可以通过Struts2的结果类型返回JSON数据,告诉xhEditor图片上传是否成功以及图片的URL。这样,xhEditor就可以根据返回的URL显示上传的图片了。 ```xml <!-- struts2.xml配置 --> ...
xhEditor编缉器,用于java开发时,上传文件,同时解决了在火狐上使用时报错的问题,主要是因为火狐上传时使用的是HTML5,如何解决请花1分吧!! 记得把xheditor里的上传改成servlet的路径呀!!
本篇文章将详细讲解如何结合JQuery和JSP实现XHEditor的图片上传功能。 首先,我们需要了解XHEditor的基本用法。XHEditor是基于jQuery的,因此在项目中必须先引入jQuery库。在HTML页面中,通过`<script>`标签引入...
本实例将详细介绍如何在项目中集成和使用XHEditor,以及实现文件上传功能。 首先,**XHEditor** 是一个高效且强大的富文本编辑器,它提供了许多常见的编辑功能,如字体样式、颜色设置、插入图片和链接等。由于其...
在Struts框架中集成XhEditor,可以提升用户的交互体验,实现更复杂的前端内容编辑需求。 首先,我们需要了解Struts框架的基本结构。Struts将应用程序分为模型、视图和控制器三个部分,其中模型处理业务逻辑,视图...
ASP.NET 应用中的Xheditor是一款强大的在线文本编辑器,它支持丰富的富文本编辑功能,包括图片上传。在这个特定的场景中,Xheditor与jQuery-1.11.0版本结合使用,以实现更流畅的用户体验和更高效的前端交互。 首先...
用于xheditor编辑器上传功能的配置文件 upload.aspx,直接下载拷贝到项目根目录下即可。 里面的该行: string attachdir ="../upload"; 是上传路径,根据实际引用xheditor的页面位置,要进行相应的修改,要不然无法...
2. **服务器端处理**:当用户在编辑器中插入远程图片URL时,XHEditor会向服务器发送一个请求,包含图片的URL。ASP脚本接收到请求后,需要下载远程图片到本地服务器。可以使用ASP内置的XMLHttpRequest对象或者第三方...
xheditor修改版 解决上传宽高为aoto的bug jquery-1.6 某些浏览器版本下,xheditor上传图片后会默认添加 width=“auto” height=“auto” 导致图片无法显示。
XHeditor与Struts1的结合,使得开发者能够轻松地在Struts1应用中集成富文本编辑功能。具体来说,开发者需要在JSP页面上引入XHeditor的JavaScript库,然后配置Struts1的ActionForm来接收和处理编辑器提交的内容。在...
为了实现这一功能,xheditor 内部可能集成了自定义的服务器端处理逻辑,例如这里提到的 `UploadLocalPicAction.java` 文件,很可能就是用于处理图片上传的Java代码。 【标签】"xheditor" 和 "在线编辑器" 是对这个...
XHEditor是一款基于HTML5的轻量级富文本编辑器,它提供了基本的文字编辑、排版、图片上传、视频插入等功能,同时支持自定义样式和插件扩展。其特点是界面简洁、操作流畅,尤其适合于网站内容管理、论坛、博客等应用...
- 使用xhEditor的初始化方法`xheditor()`,配置编辑器的各项参数,如工具栏、皮肤、是否支持多文件上传、图片上传URL、允许的图片类型等。例如,`tools:'full'`表示使用全部工具,`upImgUrl`指定上传URL,`upImgExt...
jquery xheditor是jquery中较好的编辑器插件,而jquery.uploadify也是jquery实现文件上传很优秀的插件,本项目实例解决了两个插件文件上传的问题,对于应用学习两个插件,实现文件上传,具有很好的参考价值,同时本例子是...
视频上传通常涉及到文件大小限制、格式转换和流媒体服务的集成,xheditor可能已经考虑到了这些因素,以确保视频内容能够顺畅地在网页上播放。 **远程抓图上传**是一个非常实用的功能,尤其对于那些经常使用屏幕截图...
总的来说,XHEditor是一个实用且易于集成的在线编辑器,尤其适合那些希望在网站或应用中提供富文本编辑功能的开发者。其简洁的API和丰富的文档使得开发者能够快速上手并进行深度定制,满足各种复杂需求。在选择在线...
这个项目是针对Java开发者的,提供了全面的XHEditor集成示例,使得开发者能够快速理解和应用这款编辑器。 在描述中提到的“xheditordemo”很可能是一个包含XHEditor实际运行示例的工程,开发者可以通过在Eclipse中...
2. xhEditor进阶使用 2.1. 进阶使用指导 2.2. 初始化参数列表 2.3. API函数接口列表 2.4. 上传程序开发规范 2.5. 插件开发指南 2.6. 皮肤设计指南 2.7. 关于二次开发 2.1. 进阶使用指导 阅读本章节请先阅读:...