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 相关文章推荐
破除一些网站复制、右键限制
Nov 04 Javascript
Jquery AJAX 框架的使用方法
Nov 03 Javascript
js打印纸函数代码(递归)
Jun 18 Javascript
限制textbox或textarea输入字符长度的JS代码
Oct 16 Javascript
如何屏蔽防止别的网站嵌入框架代码
Aug 24 Javascript
js钢琴按钮波浪式图片排列效果代码分享
Aug 26 Javascript
干货!教大家如何选择Vue和React
Mar 13 Javascript
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
Jul 23 Javascript
VUE 配置vue-devtools调试工具及安装方法
Sep 30 Javascript
JS/HTML5游戏常用算法之追踪算法实例详解
Dec 12 Javascript
深入剖析JavaScript instanceof 运算符
Jun 14 Javascript
javascript中闭包closure的深入讲解
Mar 03 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 mysql与mysqli事务使用说明 分享
2013/08/17 PHP
php中的PHP_EOL换行符详细解析
2013/10/26 PHP
php-redis中的sort排序函数总结
2015/07/08 PHP
来自国外的页面JavaScript文件优化
2010/12/08 Javascript
打造基于jQuery的高性能TreeView(asp.net)
2011/02/23 Javascript
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
2011/05/07 Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
2014/01/03 Javascript
基于javascript实现表格的简单操作
2016/05/21 Javascript
AngularJS基础 ng-init 指令简单示例
2016/08/02 Javascript
js实现界面向原生界面发消息并跳转功能
2016/11/22 Javascript
JavaScript学习笔记--常用的互动方法
2016/12/07 Javascript
Angularjs2不同组件间的通信实例代码
2017/05/06 Javascript
BootStrap导航栏问题记录
2017/07/31 Javascript
JS实现的邮箱提示补全效果示例
2018/01/30 Javascript
详解VUE前端按钮权限控制
2019/04/26 Javascript
Vue路由模块化配置的完整步骤
2019/08/14 Javascript
python对html代码进行escape编码的方法
2015/05/04 Python
Windows下的Jupyter Notebook 安装与自定义启动(图文详解)
2018/02/21 Python
python/sympy求解矩阵方程的方法
2018/11/08 Python
python中使用 xlwt 操作excel的常见方法与问题
2019/01/13 Python
深入浅析python 协程与go协程的区别
2019/05/09 Python
python实现在线翻译功能
2020/03/03 Python
python 5个实用的技巧
2020/09/27 Python
css3中用animation的steps属性制作帧动画
2019/04/25 HTML / CSS
纯CSS改变webkit内核浏览器的滚动条样式
2014/04/17 HTML / CSS
css3实现冲击波效果的示例代码
2018/01/11 HTML / CSS
化工专业个人的求职信范文
2013/11/28 职场文书
中年人生感言
2014/02/04 职场文书
奥巴马连任演讲稿
2014/05/15 职场文书
超市七夕促销活动方案
2014/08/28 职场文书
员工激励培训演讲稿
2014/09/16 职场文书
2014国庆65周年领导讲话稿(3篇)
2014/09/21 职场文书
2014房屋登记授权委托书
2014/10/13 职场文书
银行贷款收入证明
2014/10/17 职场文书
小学英语新课改心得体会
2016/01/22 职场文书
2016年优秀少先队员事迹材料
2016/02/26 职场文书