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 相关文章推荐
使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇
May 07 Javascript
javascript里模拟sleep(两种实现方式)
Jan 25 Javascript
jquery ui resize 中border-box的bug修正
Apr 26 Javascript
Javascript中With语句用法实例
May 14 Javascript
JavaScript编程中的Promise使用大全
Jul 28 Javascript
实例浅析js的this
Dec 11 Javascript
详解js的六大数据类型
Dec 27 Javascript
JS匹配日期和时间的正则表达式示例
May 12 Javascript
JavaScript选择排序算法原理与实现方法示例
Aug 06 Javascript
JavaScript实现简单音乐播放器
Apr 17 Javascript
Node.js 实现远程桌面监控的方法步骤
Jul 02 Javascript
微信小程序 轮播图实现原理及优化详解
Sep 29 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
PHP Memcached + APC + 文件缓存封装实现代码
2010/03/11 PHP
在php7中MongoDB实现模糊查询的方法详解
2017/05/03 PHP
判断对象是否Window的实现代码
2012/01/10 Javascript
javascript针对DOM的应用实例(一)
2012/04/15 Javascript
js实现幻灯片效果(基于jquery插件)
2013/11/05 Javascript
node.js中的fs.truncate方法使用说明
2014/12/15 Javascript
JS+CSS实现仿雅虎另类滑动门切换效果
2015/10/13 Javascript
smartcrop.js智能图片裁剪库
2015/10/14 Javascript
详解AngularJS 模态对话框
2016/04/07 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
2016/05/03 Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
2016/05/20 Javascript
关于网页中的无缝滚动的js代码
2016/06/09 Javascript
浅谈jQuery添加的HTML,JS失效的问题
2016/10/05 Javascript
原生js实现键盘控制div移动且解决停顿问题
2016/12/05 Javascript
微信小程序 rich-text的使用方法
2017/08/04 Javascript
Vue引入jquery实现平滑滚动到指定位置
2018/05/09 jQuery
基于layui数据表格以及传数据的方式
2018/08/19 Javascript
解决angular双向绑定无效果,ng-model不能正常显示的问题
2018/10/02 Javascript
JS数组扁平化(flat)方法总结详解
2019/06/24 Javascript
vue created钩子函数与mounted钩子函数的用法区别
2020/11/05 Javascript
Python实现的监测服务器硬盘使用率脚本分享
2014/11/07 Python
Python实现遍历windows所有窗口并输出窗口标题的方法
2015/03/13 Python
Zookeeper接口kazoo实例解析
2018/01/22 Python
解决pycharm导入本地py文件时,模块下方出现红色波浪线的问题
2020/06/01 Python
解决numpy矩阵相减出现的负值自动转正值的问题
2020/06/03 Python
Python 保存加载mat格式文件的示例代码
2020/08/04 Python
python 5个顶级异步框架推荐
2020/09/09 Python
发现两个有趣的CSS3动画效果
2013/08/14 HTML / CSS
Ootori在线按摩椅店:一家专业的按摩椅制造商
2019/04/10 全球购物
保卫科工作岗位职责
2014/03/01 职场文书
餐厅总厨求职信
2014/03/04 职场文书
《长城和运河》教学反思
2014/04/14 职场文书
倡议书作文
2015/01/19 职场文书
关于召开会议的通知
2015/04/15 职场文书
会计专业2019暑假实习报告
2019/06/21 职场文书
golang 接口嵌套实现复用的操作
2021/04/29 Golang