jQuery移动端图片上传组件


Posted in Javascript onJune 12, 2016

本文实例为大家分享了移动端图片上传组件,供大家参考,具体内容如下

Imageupload
使用File API+canvas 客户端压缩图片,并实现文件上传服务端

文件依赖 JQUERY

参数API

loading:'.loading', 页面显示loading的图标selector
url:'', 接收数据的api接口地址
maxFileSize:1010241024, 服务端支持的最大单文件大小
format:/^image/i, 支持的文件格式. images text .....
isCompress:true, 如果是图片,可以开启客户端压缩,减少传输的数据文件
compressNum:0.6, 图片的压缩率,0~1 设置为1可能最终结果比未压缩还大,请慎用1.
beforeUpload:function(){}, 上传之前的处理,返回false可以阻止文件的上传
uploadStart: function(){}, 开始上传的回调
afterUpload: function(){}, 上传结束的回调
uploadProgress: function(v){} 上传的进度条
uploadError: function(){} 上传错误的回调
showThumbnail:function(){} 显示缩略图

使用范例:

<div id="proccess"></div>
压缩前:<div id="rrr1"></div>
<br>
<input type="file" multiple id="filesss" >
<br> 压缩后:<div id="rrr2"></div>
<br>
$('#filesss').mobileUpload({
  url: '',
  beforeUpload: function () {
   console.log('beforeUpload')
  },
  uploadStart: function (file) {
   console.log('uploadStart')
   console.log('原文件大小:' + file.length);
  },
  uploadProgress: function (v) {console.log('进度' + v)},
  uploadError: function () {console.log('uploadError')},
  showThumbnail: function (file) {

   $('#rrr1').append('<img src="' + file + '">');
  },
  afterUpload: function (file, data) {
   console.log('压缩后大小:' + file.length);
   $('#rrr2').append('<img src="' + file + '">');
  }
 });

更多精彩内容,请点击《jQuery上传操作汇总》,进行深入学习和研究。

以上就是移动端图片上传组件,很实用的上传组件,希望大家喜欢。

Javascript 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(6)
Dec 23 Javascript
ExtJS 2.0实用简明教程 之获得ExtJS
Apr 29 Javascript
Jquery中getJSON在asp.net中的使用说明
Mar 10 Javascript
js禁止页面复制功能禁用页面右键菜单示例代码
Aug 29 Javascript
js调试系列 源码定位与调试[基础篇]
Jun 18 Javascript
jQuery实现手机号码输入提示功能实例
Apr 30 Javascript
JQuery中Text方法用法实例分析
May 18 Javascript
JSONP原理及简单实现
Jun 08 Javascript
Bootstrap被封装的弹层
Jul 20 Javascript
jQuery手指滑动轮播效果
Dec 22 Javascript
JavaScript直接调用函数与call调用的区别实例分析
May 22 Javascript
vue-cli3访问public文件夹静态资源报错的解决方式
Sep 02 Javascript
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
Jun 12 #Javascript
JavaScript中实现键值对应的字典与哈希表结构的示例
Jun 12 #Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
Jun 12 #Javascript
JS中常用的输出方式(五种)
Jun 12 #Javascript
Node.js环境下JavaScript实现单链表与双链表结构
Jun 12 #Javascript
JavaScript实现阿拉伯数字和中文数字互相转换
Jun 12 #Javascript
深入解析JavaScript中的arguments对象
Jun 12 #Javascript
You might like
短波收音机简介
2021/03/01 无线电
dedecms防止FCK乱格式化你的代码的修改方法
2007/03/17 PHP
学习php设计模式 php实现观察者模式(Observer)
2015/12/09 PHP
动态加载js的几种方法
2006/10/23 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
2013/11/22 Javascript
使用mouse事件实现简单的鼠标经过特效
2015/01/30 Javascript
JavaScript常用的弹出广告及背投广告实现方法
2015/02/06 Javascript
分享9点个人认为比较重要的javascript 编程技巧
2015/04/27 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
2015/12/08 Javascript
javascript 四十条常用技巧大全
2016/09/09 Javascript
Vue方法与事件处理器详解
2016/12/01 Javascript
bootstrap快速制作后台界面
2016/12/05 Javascript
Vue.js自定义指令的用法与实例解析
2017/01/18 Javascript
AngularJS 单选框及多选框的双向动态绑定
2017/04/20 Javascript
Vue 2.0的数据依赖实现原理代码简析
2017/07/10 Javascript
VueJS事件处理器v-on的使用方法
2017/09/27 Javascript
基于jQuery的$.getScript方法去加载javaScript文档解析
2017/11/08 jQuery
详解如何用模块化的方式写vuejs
2017/12/16 Javascript
原生JavaScript实现的简单放大镜效果示例
2018/02/07 Javascript
Vue Promise的axios请求封装详解
2018/08/13 Javascript
js作用域和作用域链及预解析
2019/04/11 Javascript
javascript实现商品图片放大镜
2019/11/28 Javascript
ant-design-vue 实现表格内部字段验证功能
2019/12/16 Javascript
vue路由缓存的几种实现方式小结
2020/02/02 Javascript
js实现双色球效果
2020/08/02 Javascript
[13:55]Newbee vs Team Spirit
2018/06/07 DOTA
Python线程的两种编程方式
2015/04/14 Python
python 内置模块详解
2019/01/01 Python
深入了解Django中间件及其方法
2019/07/26 Python
python属于解释语言吗
2020/06/11 Python
STP协议的主要用途是什么?为什么要用STP
2012/12/20 面试题
师范应届毕业生自荐信
2013/11/18 职场文书
小区门卫管理制度
2014/01/29 职场文书
临床医学专业求职信
2014/08/08 职场文书
党员群众路线对照检查材料
2014/08/31 职场文书
工作时间调整通知
2015/04/24 职场文书