图片上传JS插件梳理与学习

项目的oper端和seller端,用了两个不同插件,简单了解一下:

一、seller端:AjaxUpload.js

seller端使用的是 AjaxUpload.js ,封装好的一个库。调用时传入参数,配置相关属性即可。

1、使用步骤

  • 引入JS文件;

  • JS代码构建对象,传入对应参数;同时JS中的方法可以进行图片上传之前之后的处理;

  • 后台:实现图片上传同时返回结果;

2、AjaxUpload的学习参考:

http://www.zhangxinxu.com/wordpress/2009/11/ajax-upload多文件上传插件翻译及中文演示/

教程很详细,和自己使用的非常类似。对于一些参数、方法的解析也很详细。可以参考。(后面的中文也是链接地址)

http://zhaoyanblog.com/archives/83.html

教程:简单的讲解了一下使用,以及参数的配置。不如上一篇,不过也很有参考意义,胜在简洁。

3、IE不兼容问题:解决 ie 返回json数据时提示下载

  1. 解决 ie 返回json提示下载 ResponseEntity方法 - all_forone - 博客园 http://www.cnblogs.com/allforone/p/3984702.html#commentform
    注:其实网上有很多教程,只是这一篇重点提示了ResponseEntity的使用,我之前不知道如何使用导致不敢尝试此种方法。此种方法应该是成功率最高的。

4、代码备份:

控件源码:https://drive.google.com/open?id=1uXDckVgUpSNdV8iJfnpNVJwiGJ1THohm

调用控件地方:https://drive.google.com/open?id=1Zhzj7n1VBiXn3qZjbEVqqDFO4esparva

后台代码(包括获取图片宽度和高度):https://drive.google.com/open?id=1vNl04hGqNfktrxJlTbXVsBs3R9jf_O_c

二、oper端:Plupload.js

oper端用的是另一个插件:Plupload.js 都是插件,使用起来区别不大。

1、使用步骤:

  • 引入plupload的源码;

  • 创建对象等步骤,以及初始化看Demo吧,这个没必要重复;

  • 其他逻辑同上一个;

2、学习参考:

https://www.cnblogs.com/2050/p/3913184.html

超级详细的一个教程,有全部属性的介绍,还有一个简单的Demo,几乎就是官方文档的翻译了...

http://blog.csdn.net/qq_30100043/article/details/78491993

里面的Demo比上面的教程详细一点,可以参考。

3、结束;

posted @ 2018-01-26 17:29  不无聊  阅读(424)  评论(0编辑  收藏  举报