当使用ExtJs默认提供的上传方法与Jersey一块使用的时候碰到了两个头疼的问题,在此记下来给大家提个醒。
主要有两个地方要注意
1.当使用ExtJs表单提交到Jersey服务端端上传文件的时候,服务端代码要设置成
@Produces(MediaType.TEXT_HTML)
否则在前台ExtJs转化Json对象的时候会报
uncaught exception: You're trying to decode an invalid JSON String: <pre>{"success":true,"errorCode":-1,"error":""}</pre
参考:http://stackoverflow.com/questions/9716694/have-issue-with-response-of-submit-in-extjs-response-in-json-but-somewhere-html
2.ExtJs回执事件每次都到failure,不走success
其实ExtJs可以解析json格式的表单回执消息,格式为
{"success":true,....}
只要添加上这段就可以,根据success自动走success和failure代码了
完整代码:
Ext.require(['Ext.form.field.File', 'Ext.form.Panel', 'Ext.window.MessageBox']);
Ext.onReady(function() {
Ext.create('Ext.form.Panel', {
renderTo : Ext.getBody(),
width : 500,
frame : true,
title : 'File Upload Form',
bodyPadding : '10 10 0',
defaults : {
anchor : '100%',
allowBlank : false,
msgTarget : 'side',
labelWidth : 30
},
items : [{
xtype : 'filefield',
id : 'form-file',
emptyText : 'Select an file',
fieldLabel : 'File',
name : 'filePath',
buttonText : '',
buttonConfig : {
iconCls : 'upload-icon'
}
}],
buttons : [
{
text : 'Save',
handler : function() {
var form = this.up('form').getForm();
if (form.isValid()) {
form.submit({
url : webRoot + 'rest/file/upload2',
waitMsg : '正在上传文件...',
success : function(form, action) {
Ext.MessageBox.alert('成功','成功上传文件 "' + action.result.fileName+ '" 到服务器');
},
failure : function(form, action) {
Ext.MessageBox.alert('失败','上传文件失败');
}
});
}
}
}, {
text : 'Reset',
handler : function() {
this.up('form').getForm().reset();
}
}]
});
});
import java.io.File;
import java.io.IOException;
import java.io.Serializable;
import java.util.Iterator;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import javax.ws.rs.POST;
import javax.ws.rs.Path;
import javax.ws.rs.Produces;
import javax.ws.rs.core.Context;
import javax.ws.rs.core.MediaType;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileItemFactory;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.codehaus.jackson.JsonGenerationException;
import org.codehaus.jackson.map.JsonMappingException;
import org.codehaus.jackson.map.ObjectMapper;
import org.springframework.stereotype.Component;
@Path(value = "file")
@Component
public class FileUpAndDownCtrl {
class UploadRespnse implements Serializable {
private String fileName;
private Boolean success = false;;
public String getFileName() {
return fileName;
}
public void setFileName(String fileName) {
this.fileName = fileName;
}
public Boolean getSuccess() {
return success;
}
public void setSuccess(Boolean success) {
this.success = success;
}
}
@POST
@Produces(MediaType.TEXT_HTML)
/* 此处必须设置为TXT_HTML,否则ExtJS前台不能获得正确的返回 */
@Path(value = "upload2")
public String loadFile(@Context HttpServletRequest request) throws JsonGenerationException, JsonMappingException, IOException {
UploadRespnse res = new UploadRespnse();
String fileRepository = "c:/files/";
if (ServletFileUpload.isMultipartContent(request)) {
FileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(factory);
List<FileItem> items = null;
try {
items = upload.parseRequest(request);
} catch (FileUploadException e) {
e.printStackTrace();
}
if (items != null) {
Iterator<FileItem> iter = items.iterator();
while (iter.hasNext()) {
FileItem item = iter.next();
if (!item.isFormField() && item.getSize() > 0) {
String fileName = processFileName(item.getName());
try {
item.write(new File(fileRepository + fileName));
res.setSuccess(true);
res.setFileName(fileName);
} catch (Exception e) {
e.printStackTrace();
res.setSuccess(false);
}
}
}
}
}
ObjectMapper ob = new ObjectMapper();
String resStr = ob.writeValueAsString(res);
return resStr;
}
private String processFileName(String fileNameInput) {
String fileNameOutput = null;
fileNameOutput = fileNameInput.substring(fileNameInput.lastIndexOf("\\") + 1, fileNameInput.length());
return fileNameOutput;
}
}
分享到:
相关推荐
标题中的“Extjs+java+swf多文件上传进度条显示项目”是一个综合性的Web开发实践,涉及到前端的用户界面、后端的数据处理以及文件上传过程中进度反馈的实现。这个项目利用了Extjs库来构建用户界面,Java作为服务器端...
网上有些这样的例子,但是下了几个都没有跑起来,哎,希望那些发文章的人要发就发全的,别发个半生不熟的。... 现在自己整理了一个Struts2+ExtJS2实现文异步文件上传,没法上传图片无法看到效果,直接上源码吧。
学习这个项目,你可以了解如何在ExtJs中创建文件上传表单,如何配置Struts2的Action来接收文件,以及如何在服务器端处理上传的文件。此外,你还能了解到前端和后端之间如何通过Ajax进行通信,以及如何处理文件上传的...
【标题】"swf+Extjs+java多文件上传项目"是一个基于SwfUpload插件、ExtJS前端框架和Java后端技术实现的文件批量上传解决方案。该项目旨在提供一种高效、用户友好的文件上传体验,适用于需要处理大量文件上传需求的...
基于 Extjs + spring + hibernate 的OA框架 基于 Extjs + spring + hibernate 的OA框架 基于 Extjs + spring + hibernate 的OA框架
一个简单的 安全验证的dome 自己看配置文件 在mysql下建库 自动生成表 添加好权限 权限表 role 内容最少如下 id name value 1 admin ROLE_ADMIN 2 user ROLE_USER value值必须以ROLE_开头 配置好 用户与 权限边的...
Extjs+struts实现文件上传 使用说明中的UploadfileAction.java中的代码要拷贝到一个JSP文件中并将url: '/rsgl/uploadfile.do',改为url: '/rsgl/jspcos.jsp',才可以正常上传
extjs+asp+access 实例, 用IIS 即可立即调试 详细请看里面说明 同时,打包文件有个extjs3.0的javascript包,里面有个example文件夹,很多都可以copy过来改成自己的代码
《基于Extjs、SpringMVC和MyBatis的财务管控系统构建详解》 在现代企业信息化建设中,财务管控系统的构建至关重要,它能够帮助企业高效管理财务数据,提高运营效率,确保财务安全。本文将深入探讨如何利用Extjs、...
通过使用ExtJS进行界面设计,ASP.NET处理业务逻辑和数据操作,以及XML文件进行数据存储和结构定义,开发者可以构建出既美观又功能强大的后台系统。同时,提供的示例代码和资源可以帮助开发者快速上手,进行二次开发...
ExtJs+3.0+最新最全中文API帮助文档+CHM版@156_25590.exe
这是本人自己总结最好用的通用后台管extjs+MySQL+oracle+SQL server数据库源码:主要运用了一下的知识: 1、主要运用的后台框架是extjs, 2、jsp+hibernate+Struts2+spring+ajax+jQuery, 3、用到了Java面向对象的...
在“EXTJS+DWR3.0实现文件上传”这个主题中,我们将探讨如何结合这两者来实现一个高效且用户友好的文件上传功能。在实际的Web应用中,文件上传是一个常见的需求,例如在社交媒体平台上传图片、在文档分享网站上传...
在"ssh+extjs+mysql整合"中,我们将SSH框架与ExtJS前端技术和MySQL数据库结合起来,构建一个完整的Web应用。以下是对这个整合过程的详细说明: 1. **Spring**:Spring作为核心框架,负责管理应用程序的各个组件,...
EXTJS则是一个强大的JavaScript UI框架,提供了丰富的组件和美观的用户界面。Spring是一个全面的Java企业级应用开发框架,它提供依赖注入、AOP(面向切面编程)、事务管理等功能。Hibernate是Java领域的一款持久化...
2. JavaScript源码:EXTJS的配置文件和自定义组件代码。 3. CSS样式表:定义EXTJS组件的外观和主题。 4. Java源码:Structs的Action、Service和DAO层代码,处理业务逻辑和数据库操作。 5. MySQL数据库脚本:创建...
ExtJS 是一个强大的JavaScript库,专门用于构建富客户端(Rich Internet Applications,RIA)的前端应用。它提供了丰富的组件模型,包括表格、面板、菜单、窗口、图表等多种UI元素,使得开发者能够创建出交互性强、...
本话题主要关注如何使用Java后端和ExtJS前端框架来实现单文件上传的流程。下面将详细讲解这个过程涉及的关键知识点。 首先,我们来看Java文件上传。在Java中,处理文件上传主要依赖于Servlet API中的`Part`接口,这...
extJs 跟mxgraph一样都是一种前台框架,可以混着用,这个例子将结合extjs + mxgraph 做网络拓扑图。mxgraph是将html的页面元素当做一个容器(container),并在此容器中画图的,而extJs也是将此容器包装成一个window...
Extjs+WEB+应用程序开发指南 Extjs+WEB+应用程序开发指南 Extjs+WEB+应用程序开发指南