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

图片上传JS插件梳理与学习的更多相关文章

  1. 头像截取 图片上传 js插件

    先看一下整体效果 页面html <div class="row"> <div class="tabs-container"> <u ...

  2. 图片上传jQuery插件(兼容IE8)

      图片上传jQuery插件(兼容IE8) 代码来源 :https://github.com/zilan93/uploadImg   html <!DOCTYPE html> <ht ...

  3. 百度编辑器前后端二开图片上传Js Thinkphp tp5 ueditor

    百度编辑器图片上传Jsueditor.all.min.js 下载链接 链接:https://pan.baidu.com/s/1VNgw9ELgRRHKeCQheFkQTw 提取码:fnfi 使用方法: ...

  4. springMVC3 ckeditor3.6 图片上传 JS回调

    一.引入js文件 <script type="text/javascript" src="<%=base %>/resources/ckeditor/c ...

  5. 适用于各浏览器支持图片预览,无刷新异步上传js插件

    文件上传无疑是web应用中一个非常常用的功能,不管是PHP.jsp还是aspx.mvc等都会需要文件上传,但是众所周知当使用自带的文件上传功能时总会出现页面刷新的情况.当然现在有了html5这个好东西 ...

  6. 阿里云OSS图片上传plupload.js结合jq-weui 图片上传的插件

    项目中用到了oss上传,用的plupload,奈何样式上不敢恭维,特别是放在移动端上使用.于是自己把它移植到了jq weui的上传图片组件上. 更改:选择照片后确认即及时上传至oss服务器,不限制上传 ...

  7. 图片上传js

    var imgURL; function getImgURL(node) { try{ var file = null; if(node.files && node.files[0] ...

  8. ASP.Net MVC3 图片上传详解(form.js,bootstrap)

    图片上传的插件很多,但很多时候还是不能切合我们的需求,我这里给大家分享个我用一个form,file实现上传四张图片的小demo.完全是用jquery前后交互,没有用插件. 最终效果图如下: 玩过花田人 ...

  9. 推荐ajaxfilemanager for tiny_mce 比较完善的tiny_mce编辑器的图片上传及图片管理插件PHP版 支持中文

    tiny_mce编辑器,我觉得挺简洁.好用的,但就是图片上传的插件是收费的,而且网上找了半天也没有找到开源好用的上传插件. 不过功夫不负有心人,终于还就被我找到一款相当满意的插件. 这个插件的名字叫a ...

随机推荐

  1. OpenERP 搜索过滤: 过去三个月

    解决这个问题的重点在于 relativedelta 的应用 示例代码如下: 1: <!-- filter: last three months --> 2: <filter icon ...

  2. Objective-C之成魔之路【19-归档】

    郝萌主倾心贡献,尊重作者的劳动成果,请勿转载. 假设文章对您有所帮助.欢迎给作者捐赠.支持郝萌主,捐赠数额任意,重在心意^_^ 我要捐赠: 点击捐赠 Cocos2d-X源代码下载:点我传送 在Obje ...

  3. WebUI中 DataGrid多层表头 的终极解决办法

    因为DataGrid控件的简单易懂,大多数做.NET程序员都喜欢用,有需要把数据显示成表格样式的地方DataGrid会是首选,但是所有的东西都会有好和不好的一面,DataGrid在给我们带来了数据显示 ...

  4. Android startActivities()的使用

    startActivities()和startActivity类似,也是界面跳转: Intent[] intents = new Intent[2]; intents[0] = new Intent( ...

  5. Sublime text 3 搭建Python3 IDE

    起因:为了提高编码工作中的体验,Sublime Text:不仅具有华丽的界面,还支持插件扩展机制,用她来写代码,绝对是一种享受. Vim难于上手,Eclipse,VS 体积庞大,即便体积轻巧迅速启动的 ...

  6. linux navicat 过期 解决办法

    :~$ cd .navicat:~/.navicat$ rm *.reg:~/.navicat$ rm .update-timestamp:~/.navicat$ rm navicat.crontab ...

  7. Atitit.python web环境的配置 attilax 总结

    Atitit.python web环境的配置 attilax 总结 1. 下载modpython/1 1.1. 安装python2.5.11 1.2. 安装modpython1 2. 设置py文件的u ...

  8. android studio中文乱码问题

    在build.gradle中加入代码: tasks.withType(JavaCompile) { options.encoding = "UTF-8" }

  9. cef

    http://blog.csdn.net/hats8888/article/details/53886591 http://blog.csdn.net/gong_hui2000/article/det ...

  10. c#的bug?

    在群里面有人提出了这么一个诡异的问题,请问15.5%3.1=? 然后,我就去看了看,因为他们说结果是3.1!!!