项目的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. Python——Socket 编程教程

    这是用来快速学习 Python Socket 套接字编程的指南和教程.Python 的 Socket 编程跟 C 语言很像. Python 官方关于 Socket 的函数请看 http://docs. ...

  2. How to learn a new technology

    是什么?为什么会出现? 这一阶段主要是对该技术有一个整体了解,他所解决的是什么问题,他的整体结构等. 怎么做? 最简单的是找一个上手视频,因为视频是非常直观的展示了技术的使用.先学会用是最根本的,对于 ...

  3. asp.net core mvc视频A:笔记5-1.路由规则

    方法一:通过MapRoute方法,配置文件位置 小例子:如果所有路径都要在admin下,可以这样写 方法二:通过路由属性 相对路由 现在需要加/admin/home/index才能正常访问原来的默认页 ...

  4. android中几个很有用的的api

    0x0001 public PackageInfo getPackageArchiveInfo (String archiveFilePath, int flags) Since: API Level ...

  5. Cocos2D-X2.2.3学习笔记10(几何图形)

    我们这节来学习几何图形,即怎样使用Cocos2d-x绘制各种图形.已经贝塞尔曲线 我们查看CCNode中有个draw函数,我们须要将绘制的代码所有写在这个函数里面.写在init函数里是画不出线来的, ...

  6. redis主从和主从切换

    redis数据量增加,导致内存不够用,要迁移分离redis和程序: 1. 在新redis服务器上,启动一个redis实例,配置和master配置一致,不同的是配置文件中修改并启用 slave-read ...

  7. Atitit. atiJavaExConverter4js  新的特性

    Atitit. atiJavaExConverter4js  新的特性 1.1. V1新特性1 1.2. V2 新特性1 2. Keyword1 3. Catch1 4. Convert n Thro ...

  8. SQL——使用游标进行遍历

    前两天一个同事大叔问了这样一个问题,他要对表做个类似foreach的效果,问我怎么搞.我想了想,就拿游标回答他,当时事实上也没用过数据库中的游标,可是曾经用过ADO里面的,感觉应该几乎相同. 今天闲下 ...

  9. placeholder 不支持进行兼容处理

    ;(function () { //全局ajax处理 $.ajaxSetup({ complete: function (jqXHR) {}, data: { }, error: function ( ...

  10. 如何添加、删除、合并PDF文件里的页面?

    使用Adobe Acrobat. Adobe中文官网http://www.adobe.com/cn/products/acrobat.html 能够自己下载破解版. watermark/2/text/ ...