昨天做项目的时候,利用Extjs4+springmvc文件上传,服务器端springmvc处理上传文件很顺利,只是当springmvc返回json数据给extjs时却产生了奇怪的异常:
Uncaught Ext.JSON.decode(): You're trying to decode an invalid JSON String:......
google了大半天,原来是extjs文件上传时对服务器端返回数据的处理问题:
File uploads are not performed using normal 'Ajax' techniques, that is they are not performed using XMLHttpRequests. Instead a hidden <form>
element containing all the fields is created temporarily and submitted with its target set to refer to a dynamically generated, hidden <iframe>
which is inserted into the document but removed after the return data has been gathered.
The server response is parsed by the browser to create the document for the IFRAME. If the server is using JSON to send the return object, then theContent-Type header must be set to "text/html" in order to tell the browser to insert the text unchanged into the document body.
关键在于红色字体部分,对于文件上传,服务器端返回json对象时,则Content-Type必须为“text/html”
其实Ajax只能够收发基于文本的数据,是不能够处理二进制数据的。之所以看上去能够“异步上传”,是因为Extjs针对包含上传的表单使用了iframe提交的方法,流程如下:
1.在页面创建一个iframe和隐藏的form,form的各字段和Extjs表单字段相同;
2.将form的target指向该iframe,并监听iframe的onload事件;
3.提交这个form,待iframe的onload事件触发后(加载完成),读取iframe的innerHtml,并保存到responseText;
4.默认情况下,尝试将responseText进行JSON解码;
5.根据解码结果,调用success或failure回调。
如此则只须修改springmvc的response的ContentType即可
首先想到的是这样:
@RequestMapping(value="/uploadPhoto",method=RequestMethod.POST)
public @ResponseBody
ExtjsResultBean uploadPhoto(UploadFileBean uploadFile,
BindingResult bindingResult, HttpServletRequest request,HttpServletResponse response){
response.setContentType("text/html");
}
好像这样不行,extjs接收的服务器端返回的还是"application/json",
幸好在stackoverflow上一兄弟说这样能解决:
在spring-mvc.xml中:
<mvc:annotation-driven>
<mvc:message-converters>
<bean class="com.wanghaisheng.bean.MyStringHttpMessageConverter"/>
<bean class="org.springframework.http.converter.json.MappingJacksonHttpMessageConverter" >
<property name="supportedMediaTypes">
<array>
<value>text/html</value>*******
<value>application/json</value>
</array>
</property>
</bean>
</mvc:message-converters>
</mvc:annotation-driven>
spring controller中:
@RequestMapping(value="/uploadPhoto",method=RequestMethod.POST,produces = MediaType.TEXT_HTML_VALUE)
public @ResponseBody
ExtjsResultBean uploadPhoto(UploadFileBean uploadFile,
BindingResult bindingResult, HttpServletRequest request,HttpServletResponse response){}
则顺利解决
分享到:
相关推荐
Extjs+SpringMVC+MyBaits财务管控系统
SpringMVC+ExtJs4.2的案例,完全遵循ExtJs4.2的MVC模式来完成,导入项目,修改jdbc配置文件即可运行,数据库为MySql,hibernate自动生成表
NULL 博文链接:https://zxf-noimp.iteye.com/blog/630528
Extjs4 swfupload 多文件 上传
Extjs_SpringMvc增删改查(自动搜索),用maven做的服务器。非常简单,只要启动maven就行,用了你就知道很方便
extjs的java版本的上传文件进度条
用Ext编写的多文件上传组件,已封装。 支持多文件上传,文件下载,文件删除,
ExtJS原生多文件拖动上传组件 使用时修改包路径 1.多文件上传 2.支持拖动上传 3.支持图片压缩 4.支持图片合并 5.文件排序 可扩展实时图片预览 api //初始化画板 initCanvas //上传文件窗口 uploadWindow //初始化...
该程序是我耗时两周时间,边学边做而成,侧重Extjs方面,springMVC和hibernate只是简单的使用,如有错误,请忽略。 该项目只做大家学习使用,懂得分享,才能学到更多。
对应的描述看本人博文《ExtJS4 上传文件类型和大小的判断方法(实例) 》:http://blog.csdn.net/biboheart/article/details/10579175 在这里不具体描述了。看题也大概可以知道这些代码实现了什么应用。
基于extjs的springmvc
springMVC3,hibernate3,Extjs json,spring注解,oracle,表自动生成
本实例为ExtJS4.2.1 MVC 和 SpringMVC3.0.5 基于注解模式下的开发实例,是桌面型的应用程序,包含全部需要的jar包,定义了项目的基于架构和实现,可在MyEclipse10打开和部署,对于有需要在该环境下进行开发的人员,...
Extjs4文件上传,后台struts2
ExtJS4多文件上传,可单独对每个文件进行管理,有进度条。
ExtJS验证文件上传类型,详细讲述ExtJS如何验证文件上传文件的类型!
项目分客户端exjst+springmvc+dubbo,服务端dubbo+mybatis,数据库oracle,纯注解配置,具有完善的事务控制,各种层的拦截器,分页。
基于SpringMVC+Hibernate+Extjs4的web项目开发DEMO,实现基本的增删查过功能,含有数据库sql
官方或网上ExtJS实现多文件上传的UploadDialog只适用于ExtJS2.x,我经过修改使其使用于ExtJS3.x,并在修改时尽量尊重于原始功能代码,请大家放心使用!
springmvc+extjs4实例树