项目的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. UGUI 实现界面 渐隐渐现 FadeIn/Out 效果

    孙广东  2015.7.10 事实上熟悉NGUI的人,应该知道  实现渐隐渐现 FadeIn/Out 效果是非常方便的,由于父对象 的 改变会自己主动影响到子对象. 比方 UIWidget.UIPan ...

  2. sql中limit和汇总函数的集合使用

    limit和求和一起 select SUM(A.high) from (select * from minute1_K order by DateTime desc limit 10) A limit ...

  3. lodash kebabCase

    _.kebabCase([string='']) 转换字符串为 kebab case. _.kebabCase('Foo Bar'); // => 'foo-bar' _.kebabCase(' ...

  4. 基于python的ardrone control源码分析与心得

    这里有一段python代码,可用于操控ardrone 2.0.实验室曾经借鉴用过,并添加了部分功能.如今复习一下,顺便理理python的相关知识点. #!/usr/bin/env python # A ...

  5. javascript 清空数组的方法

    1,splice var ary = [1,2,3,4]; ary.splice(0,ary.length); console.log(ary); // 输出 [],空数组,即被清空了 2,lengt ...

  6. poj 2409 Let it Bead Polya计数

    旋转能够分为n种置换,相应的循环个数各自是gcd(n,i),个i=0时不动,有n个 翻转分为奇偶讨论,奇数时有n种置换,每种有n/2+1个 偶数时有n种置换,一半是n/2+1个,一半是n/2个 啃论文 ...

  7. python重置变量 sys.defaultencoding

    <span style="font-family: Arial, Helvetica, sans-serif;">比如重置变量defaultencoding为utf-8 ...

  8. MongoDB笔记(一):MongoDB介绍及Windows下安装

    一.前言 MongoDB火了也蛮久了,关于简介看看这里吧.项目中一直没用上,最近闲的慌就自己学了下,顺便记录下以便今后复习. 本系列是基于MongoDB 2.4.8 windows 64位讲解,后面的 ...

  9. Linux管理员必须知道的sudo命令

    "Sudo"是Unix/Linux平台上的一个很实用的工具,它同意系统管理员分配给普通用户一些合理的"权利",让他们执行一些仅仅有超级用户或其它 特许用户才干完 ...

  10. Stage3D&Away3D整理ppt

    资料下载地址:http://files.cnblogs.com/xignzou/away3D%E6%A1%86%E6%9E%B6%E5%AD%A6%E4%B9%A0%E5%88%86%E4%BA%AB ...