http://blog.csdn.net/yerenyuan_pku/article/details/72808229

上文我们已实现了图片上传功能,但是有个问题,那就是对浏览器兼容性不够,因为Map类型的返回值在火狐浏览器无法识别,如下图所示。 

注意:以上火狐浏览器中添加图片的按钮没出来,即说明火狐浏览器中还没安装Adobe Flash Player插件,如何安装请读者自行百度。 
为了解决这个兼容性问题,我们需要修改下返回值类型,将Map类型变为String类型(也就是json串)。我们至少可以使用以下两种方案来解决。

  1. 使用fastjson来实现转换。
  2. 使用已有的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上传图片浏览器兼容性问题的更多相关文章

  1. KindEditor 上传图片浏览器兼容性问题

    1.使用 KindEditor 的图片上传插件时,需要返回如下格式的 JSON 数据 //成功时 { "error" : 0, "url" : "ht ...

  2. 一条代码解决各种IE浏览器兼容性问题

    在网站开发中不免因为各种兼容问题苦恼,针对兼容问题,其实IE给出了解决方案Google也给出了解决方案百度也应用了这种方案去解决IE的兼容问题 百度源代码如下 <!Doctype html> ...

  3. 解决SVG跨浏览器兼容性问题

    Raphael JS:SVG/VML+JS实现跨浏览器的矢量图形实现方案 http://blog.csdn.net/tiewen/article/details/8535748 SVG那些小事儿 ht ...

  4. (转)淘淘商城系列——KindEditor富文本编辑器的使用

    http://blog.csdn.net/yerenyuan_pku/article/details/72809794 通过上文的学习,我们知道了怎样解决KindEditor富文本编辑器上传图片时的浏 ...

  5. (转) 淘淘商城系列——使用FastDFS-Client客户端进行上传图片的测试

    http://blog.csdn.net/yerenyuan_pku/article/details/72804018 不久之前,我们实现了商品的类目选择这个功能,但这只是万里长征的第一步,我们还有很 ...

  6. (转)淘淘商城系列——分布式文件系统FastDFS

    http://blog.csdn.net/yerenyuan_pku/article/details/72801777 商品添加的实现,包括商品的类目选择,即商品属于哪个分类?还包括图片上传,对于图片 ...

  7. (转)学习淘淘商城第二十二课(KindEditor富文本编辑器的使用)

    http://blog.csdn.net/u012453843/article/details/70184155 上节课我们一起学习了怎样解决KindEditor富文本编辑器上传图片的浏览器兼容性问题 ...

  8. 淘淘商城学习笔记 之 上传图片到远程服务器,图片的回显出现的bug

    最近在学习淘淘商城中用到的技术,感觉受益良多,遇到一个比较奇怪的bug调了好久,遂心乐之分享于诸君 bug情况是这样的:在商城的后台上传图片之后图片回显不出来,右键查看链接,发现链接被加了localh ...

  9. (转) 淘淘商城系列——Redis集群的搭建

    http://blog.csdn.net/yerenyuan_pku/article/details/72860432 本文我将带领大家如何搭建Redis集群.首先说一下,为何要搭建Redis集群.R ...

随机推荐

  1. 修改系统时间(取得服务器时间,使用SetLocalTime API函数,需要UAC权限)

    我的客户遇到系统时间不对,自己又不会改,于是想到利用服务端时间来修改本地的系统时间. 第一步,把下面xml存成uac.xml文件备用. <?xml version="1.0" ...

  2. IDE配置jvm参数

    -------- IntelliJ IDEA 配置参数:-Xms34m -Xmx234m 内存初始化大小,最小和最大值: 测试代码: public class JVMDemoTest { public ...

  3. oracle 建表 主键自增序列/////

    oracle 建表 主键自增序列 (2011-10-12 11:59:22) 转载▼ 标签: 杂谈 分类: oracle SQL> create table sms_activity(  2   ...

  4. oracle启动流程

    1.切换为oracle用户:su - oracle,如: $su - oracle 2..启动监听器:lsnrctl status,如: [oracle@master ~]$ lsnrctl star ...

  5. hdu 5534

    题目描述:n个节点度数之和为n-2,每个节点预分配了1个度,任意分配度数是否有可能形成树? 从1到n节点,考虑树的形状,考虑分配给当前节点i的度数,并且注意到当前节点的度数不会影响其他节点(之前或者之 ...

  6. NPU 2015年陕西省程序设计竞赛网络预赛(正式赛)F题 和谐的比赛(递推 ||卡特兰数(转化成01字符串))

    Description 今天西工大举办了一场比赛总共有m+n人,但是有m人比较懒没带电脑,另外的n个人带了电脑.不幸的是,今天机房的电脑全坏了只能用带的电脑,一台电脑最多两人公用,确保n>=m. ...

  7. 去除inline-block的间隙

    产生间隙的原因就是标签之间的空格,去除的方法: 1 设置父元素的font-size:0;空格字符的宽高都为0, <div class="demo1 demo2"> &l ...

  8. Java Socket实战之三:传输对象

    转自:https://i.cnblogs.com/EditPosts.aspx?opt=1 前面两篇文章介绍了怎样建立Java Socket通信,这一篇说一下怎样使用Java Socket来传输对象. ...

  9. 更改Identity用户信息

    1.用当前上下文对象初始化为一个一个UserStote 对象,然后使用 userstore对象 初始化一个UserManagement对象.找到这个对象,然后更新它的部分属性.然后调用 manager ...

  10. 【黑金教程笔记之004】【建模篇】【Lab 03 消抖模块之一】—笔记

    设计思路: (1)       一旦检测到按键资源按下(从高电平到低电平),“电平检测模块”就会拉高H2L_Sig电平,然后拉低. (2)       “10ms延迟模块”检测到H2L_Sig高电平, ...