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. 不常见使用的css

    flex和white-space等属性 1.flex属性让所有弹性盒模型对象的子元素都有相同的长度,忽略它们内部的内容.style={{flex:5}},该元素占父元素的六分之五. 2. white- ...

  2. Enterprise Architect 生成项目类图

    Enterprise Architect使用教程: https://blog.csdn.net/chenglc1612/article/details/81083151 主要流程 --到此-自动生成完 ...

  3. 并不对劲的bzoj3998:loj2102:p3975:[TJOI2015]弦论

    题目大意 对于一个给定的长度为n(\(n\leq5*10^5\))的字符串, 分别求出不同位置的相同子串算作一个.不同位置的相同子串算作多个时,它的第k(\(k\leq10^9\))小子串是什么 题解 ...

  4. [Usaco2018 Feb] New Barns

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=5192 [算法] 维护树的直径,在树上离一个点最远的点一定是一条直径的端点.     ...

  5. Watir: Get document detail information in Watir.

    ie.#{element}(:id,"foo").document.currentstyle.attributeAsCamelCase so ie.#{element}(:id,& ...

  6. Ubuntu midi 播放

    One of the simplest methods to play a midi file in Ubuntu is to install timidity. sudo apt-get insta ...

  7. property_get / property_set (转载)

    转自:http://blog.csdn.net/xujianqun/article/details/6363318 每个属性都有一个名称和值,他们都是字符串格式.属性被大量使用在Android系统中, ...

  8. bzoj 3709: [PA2014]Bohater【贪心】

    先打能回血的,按消耗从小到大打: 然后按回血量降序打剩下的(把消耗和回血反着看就是上一种怪,打法一样): 中间体力小于0就输出无解 #include<iostream> #include& ...

  9. CCF2016.4 - A题

    思路:枚举每个点,看看它是否同时小于/大于前一个点和后一个点 import java.util.Scanner; public class Main { public static void main ...

  10. IE兼容之中文汉字请求乱码-network

    IE兼容之中文汉字请求乱码 IE控制台报错: IE网络报错: 解决方法: encodeURI('--- @ -- 子卿 -'); // "---%20@%20--%20%E5%AD%90%E ...