(转) 淘淘商城系列——解决KindEditor上传图片浏览器兼容性问题
http://blog.csdn.net/yerenyuan_pku/article/details/72808229
上文我们已实现了图片上传功能,但是有个问题,那就是对浏览器兼容性不够,因为Map类型的返回值在火狐浏览器无法识别,如下图所示。 
注意:以上火狐浏览器中添加图片的按钮没出来,即说明火狐浏览器中还没安装Adobe Flash Player插件,如何安装请读者自行百度。
为了解决这个兼容性问题,我们需要修改下返回值类型,将Map类型变为String类型(也就是json串)。我们至少可以使用以下两种方案来解决。
- 使用fastjson来实现转换。
- 使用已有的jackson来实现转换。
本文主讲第二种方式,如果大家有兴趣想使用第一种方式的话,可参考学习淘淘商城第二十一课(解决KindEditor上传图片不兼容的问题)这篇博客进行学习。
我们知道SpringMVC的@ResponseBody注解是将对象转变为json传到前台展示,而帮我们做转换操作的便是jackson。那么我们怎样使用jackson来处理转换操作呢?我们可以封装一个自定义工具类——JsonUtils.java,它是放到taotao-common工程下的,如下图所示。
为了大家方便复制,下面将JsonUtils类的内容贴出。
/**
* 淘淘商城自定义响应结构
*/
public class JsonUtils {
// 定义jackson对象
private static final ObjectMapper MAPPER = new ObjectMapper();
/**
* 将对象转换成json字符串。
* <p>Title: pojoToJson</p>
* <p>Description: </p>
* @param data
* @return
*/
public static String objectToJson(Object data) {
try {
String string = MAPPER.writeValueAsString(data);
return string;
} catch (JsonProcessingException e) {
e.printStackTrace();
}
return null;
}
/**
* 将json结果集转化为对象
*
* @param jsonData json数据
* @param clazz 对象中的object类型
* @return
*/
public static <T> T jsonToPojo(String jsonData, Class<T> beanType) {
try {
T t = MAPPER.readValue(jsonData, beanType);
return t;
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
/**
* 将json数据转换成pojo对象list
* <p>Title: jsonToList</p>
* <p>Description: </p>
* @param jsonData
* @param beanType
* @return
*/
public static <T>List<T> jsonToList(String jsonData, Class<T> beanType) {
JavaType javaType = MAPPER.getTypeFactory().constructParametricType(List.class, beanType);
try {
List<T> list = MAPPER.readValue(jsonData, javaType);
return list;
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
}
注意:由于taotao-common工程新添加了一个工具类,因此需要重新打下包。
下面使用JsonUtils工具类来做json转换,因此我们的PictureController类的代码就要改为如下图所示的样子。 
注意:使用@ResponseBody注解返回java对象时,Content-Type响应头的值默认为application/json;charset=UTF-8,而要解决浏览器兼容性问题,则需要返回字符串,并且Content-Type响应头的值要为text/plan;charset=UTF-8。
下面我们重启taotao-manager和taotao-manager-web工程,重启成功后,用火狐浏览器再尝试上传图片,如下图所示,发现成功了。 
(转) 淘淘商城系列——解决KindEditor上传图片浏览器兼容性问题的更多相关文章
- KindEditor 上传图片浏览器兼容性问题
1.使用 KindEditor 的图片上传插件时,需要返回如下格式的 JSON 数据 //成功时 { "error" : 0, "url" : "ht ...
- 一条代码解决各种IE浏览器兼容性问题
在网站开发中不免因为各种兼容问题苦恼,针对兼容问题,其实IE给出了解决方案Google也给出了解决方案百度也应用了这种方案去解决IE的兼容问题 百度源代码如下 <!Doctype html> ...
- 解决SVG跨浏览器兼容性问题
Raphael JS:SVG/VML+JS实现跨浏览器的矢量图形实现方案 http://blog.csdn.net/tiewen/article/details/8535748 SVG那些小事儿 ht ...
- (转)淘淘商城系列——KindEditor富文本编辑器的使用
http://blog.csdn.net/yerenyuan_pku/article/details/72809794 通过上文的学习,我们知道了怎样解决KindEditor富文本编辑器上传图片时的浏 ...
- (转) 淘淘商城系列——使用FastDFS-Client客户端进行上传图片的测试
http://blog.csdn.net/yerenyuan_pku/article/details/72804018 不久之前,我们实现了商品的类目选择这个功能,但这只是万里长征的第一步,我们还有很 ...
- (转)淘淘商城系列——分布式文件系统FastDFS
http://blog.csdn.net/yerenyuan_pku/article/details/72801777 商品添加的实现,包括商品的类目选择,即商品属于哪个分类?还包括图片上传,对于图片 ...
- (转)学习淘淘商城第二十二课(KindEditor富文本编辑器的使用)
http://blog.csdn.net/u012453843/article/details/70184155 上节课我们一起学习了怎样解决KindEditor富文本编辑器上传图片的浏览器兼容性问题 ...
- 淘淘商城学习笔记 之 上传图片到远程服务器,图片的回显出现的bug
最近在学习淘淘商城中用到的技术,感觉受益良多,遇到一个比较奇怪的bug调了好久,遂心乐之分享于诸君 bug情况是这样的:在商城的后台上传图片之后图片回显不出来,右键查看链接,发现链接被加了localh ...
- (转) 淘淘商城系列——Redis集群的搭建
http://blog.csdn.net/yerenyuan_pku/article/details/72860432 本文我将带领大家如何搭建Redis集群.首先说一下,为何要搭建Redis集群.R ...
随机推荐
- Eclipse添加Qt插件
此文件仅为步骤操作作一个记录,以便以后方便查阅. 1.操作大体参考这个网站:http://blog.csdn.net/defonds/article/details/5013412 2.我的运行环境: ...
- XMU 1605 nc与数列 【动态规划】
1605: nc与数列 Time Limit: 2000 MS Memory Limit: 64 MBSubmit: 84 Solved: 13[Submit][Status][Web Board ...
- linux网络socket 接口转
linux网络socket 接口 1.socket函数:一个进程必须做的第一件事就是调用socket函数获得一个文件描述符. ------------------------------------- ...
- [MAC] Load Crypto.Cipher.ARC4 Failed, Use Pure Python Instead.
MAC启动GoAgent,出现Load Crypto.Cipher.ARC4 Failed, Use Pure Python Instead. 解决方法:为Python安装pycrypto,可通过Py ...
- caioj1275&&hdu4035: 概率期望值6:迷宫
期望的大难题,%%ZZZ大佬的解释,不得不说这是一道好题(然而膜题解都没完全看懂,然后就去烦ZZZ大佬) 简单补充几句吧,tmp的理解是个难点,除以tmp的原因是,当我们化简时,子节点也有一个B*f[ ...
- git不同分支局部代码合并 git cherry-pick
cherry-pick 可以局部代码合并. cherry-pick不仅可以用在不同分支之间,还可以用在同一个分支上. 比如说你在某一个向某个分支中添加了一个功能,后来处于某种原因把它给删除了,然而后来 ...
- 洛谷P3243 [HNOI2015]菜肴制作——拓扑排序
题目:https://www.luogu.org/problemnew/show/P3243 正向按字典序拓扑排序很容易发现是不对的,因为并不是序号小的一定先做: 但若让序号大的尽可能放在后面,则不会 ...
- Linux 常用命令一 ls
一.ls命令 用于查看目录下的文件信息. ls 当前目录下都有哪些文件: wang@wang:~$ ls examples.desktop workpalce 模板 图片 下载 桌面 tools 公共 ...
- bzoj 3456: 城市规划【NTT+多项式求逆】
参考:http://blog.miskcoo.com/2015/05/bzoj-3456 首先推出递推式(上面的blog讲的挺清楚的),大概过程是正难则反,设g为n个点的简单(无重边无自环)无向图数目 ...
- bzoj 4276: [ONTAK2015]Bajtman i Okrągły Robin【线段树+最大费用最大流】
--因为T点忘记还要+n所以选小了所以WA了一次 注意!题目中所给的时间是一边闭一边开的区间,所以读进来之后先l++(或者r--也行) 线段树优化建图,很神.(我记得还有个主席树优化建树的?)首先考虑 ...