图片上传插件梳理与学习

Posted 2020-10-22 不无聊

项目的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、结束；