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类的内容贴出。

  1. /**
  2. * 淘淘商城自定义响应结构
  3. */
  4. public class JsonUtils {
  5. // 定义jackson对象
  6. private static final ObjectMapper MAPPER = new ObjectMapper();
  7. /**
  8. * 将对象转换成json字符串。
  9. * <p>Title: pojoToJson</p>
  10. * <p>Description: </p>
  11. * @param data
  12. * @return
  13. */
  14. public static String objectToJson(Object data) {
  15. try {
  16. String string = MAPPER.writeValueAsString(data);
  17. return string;
  18. } catch (JsonProcessingException e) {
  19. e.printStackTrace();
  20. }
  21. return null;
  22. }
  23. /**
  24. * 将json结果集转化为对象
  25. *
  26. * @param jsonData json数据
  27. * @param clazz 对象中的object类型
  28. * @return
  29. */
  30. public static <T> T jsonToPojo(String jsonData, Class<T> beanType) {
  31. try {
  32. T t = MAPPER.readValue(jsonData, beanType);
  33. return t;
  34. } catch (Exception e) {
  35. e.printStackTrace();
  36. }
  37. return null;
  38. }
  39. /**
  40. * 将json数据转换成pojo对象list
  41. * <p>Title: jsonToList</p>
  42. * <p>Description: </p>
  43. * @param jsonData
  44. * @param beanType
  45. * @return
  46. */
  47. public static <T>List<T> jsonToList(String jsonData, Class<T> beanType) {
  48. JavaType javaType = MAPPER.getTypeFactory().constructParametricType(List.class, beanType);
  49. try {
  50. List<T> list = MAPPER.readValue(jsonData, javaType);
  51. return list;
  52. } catch (Exception e) {
  53. e.printStackTrace();
  54. }
  55. return null;
  56. }
  57. }

注意:由于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. mysql 查看编码方式

    一. 查看数据库的字符集 show variables like 'character\_set\_%'; 输出: +--------------------------+--------+ | Va ...

  2. POJ2289 Jamie's Contact Groups —— 二分图多重匹配/最大流 + 二分

    题目链接:https://vjudge.net/problem/POJ-2289 Jamie's Contact Groups Time Limit: 7000MS   Memory Limit: 6 ...

  3. YTU 2580: 改错题----修改revert函数

    2580: 改错题----修改revert函数 时间限制: 1 Sec  内存限制: 128 MB 提交: 194  解决: 82 题目描述 修改revert函数,实现输入N个数,顺序倒置后输出 #i ...

  4. gdb core调试

    原文链接 http://blog.163.com/lanka83/blog/static/32637615200801793020182/http://blog.csdn.net/taina2008/ ...

  5. form的一个特性

    在一个form表单中,若只有一个input,按回车键表单会自动提交,但是当表单中存在多个input时,按回车键不会执行任何操作,这是form表单的一个特性

  6. sql server 变量 字符串拼接

    参考:SQL server中null+字符串,isnull以及把查询结果赋给一个字符变量组成另一个查询语句  1.开始定义的字符串都为null.例如:declare @sql,那么@sql就是null ...

  7. (转)Silverlight_5_Toolkit_December_2011 安装后点击Toolkit Samples没反应的解决方法

    Silverlight Toolkit官方下载地址: http://silverlight.codeplex.com/ http://blog.csdn.net/hcj116/article/deta ...

  8. 超强XSS攻击利器

    ======================================================================= BackTrack 5 R1 XSS研究之XSSer(超 ...

  9. 通过实现ServletContextListener接口创建数据库连接池(C3P0方式)

    使用Listener步骤 1. 定义Listener实现类 2. 在web.xml中配置(或使用Annotation) 使用C3P0方式创建数据库连接池需要添加的jar包 1.c3p0-0.9.5.j ...

  10. 【css】如何实现环形进度条

    最近团队的童鞋接到了一个有关环形进度条的需求,想要还原一个native的沿环轨迹渐变进度条的效果,看到这个效果的时候,笔者陷入了沉思.. 环形进度条的效果,最先想到的就是使用CSS利用两个半圆的hac ...