项目的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. Django——META内部类选项

    Django 模型类的Meta是一个内部类,它用于定义一些Django模型类的行为特性.以下对此作一总结: abstract      这个属性是定义当前的模型类是不是一个抽象类.所谓抽象类是不会对应 ...

  2. null和undefined相等比较

    在==(相等)判断中,null和undefined相等(它们也与自身相等),除此之外不与其他值相等. 示例代码: <!DOCTYPE html> <html lang="z ...

  3. Android项目-几种常见的应用架构

    android两种Tab分页的方式:TabActivity和ActivityGroup http://www.fengfly.com/plus/view-209429-1.html 1.单个Activ ...

  4. iOS 物流信息时间轴

    代码地址如下:http://www.demodashi.com/demo/11958.html timelineLogistics 是模仿淘宝物流信息时间轴界面的自定义View 准备工作 引入Maso ...

  5. eclipse git拉取完代码后怎么maven构建

    这个参考下:https://jingyan.baidu.com/article/414eccf64d29bc6b431f0ade.html 没试过上面的,反正git后的文件夹非空,用maven创建会失 ...

  6. 辛星让mysql跑的更快第一节之优化的方向和数据库建模

    近期计划写一套书目,也就是关于mysql的优化的.那么首先在博客上写写,然后整理成pdf的文档的形式,当然也期待各位的关注了.对于mysql的优化是一个比較大的话题.可优化的地方也非常多,大致想了一下 ...

  7. java 通过Apache poi导出excel代码demo实例

    package com.zuidaima.excel.util; import java.io.ByteArrayInputStream; import java.io.ByteArrayOutput ...

  8. shiro session过期后ajax请求跳转(转)

    配置了 Shrio框架,session也集成进去了 ,发现问题session会话过期,点击页面,一直请求失败.本来想集成拦截器,过滤器,但是已经用了shiro框架,sessionDestroyed 方 ...

  9. 面向对象JSON的继承(复制)与函数的继承(复制)

    今天这里和大家分享下如何复制对象 的属性 创建 对象的方式有三种,这里和大家分享下最常用的几种 1.JSON格式的方式创建对象 2.用函数的方式创建,然后用new关键字实例化对象,关于this的指向问 ...

  10. 学习spring1--跟我一起学Spring 3(2)–开发环境配置

    http://www.importnew.com/13185.html#spring     首页 所有文章 资讯 Web 架构 基础技术 书籍 教程 我要投稿 更多频道 » - 导航条 - 首页 所 ...