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 相关文章推荐
IE DOM实现存在的部分问题及解决方法
Jul 25 Javascript
IE8 chrome中table隔行换色解决办法
Jul 09 Javascript
再谈javascript图片预加载技术(详细演示)
Mar 12 Javascript
Jquery中$.post和$.ajax的用法小结
Apr 28 Javascript
分析js闭包引起的事件注册问题
Mar 29 Javascript
zepto与jquery的区别及zepto的不同使用8条小结
Jul 28 Javascript
jQuery实现多张图片上传预览(不经过后端处理)
Apr 29 jQuery
聊聊JS动画库 Velocity.js的使用
Mar 13 Javascript
vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
Sep 14 Javascript
async/await优雅的错误处理方法总结
Jan 30 Javascript
Node.js fs模块(文件模块)创建、删除目录(文件)读取写入文件流的方法
Sep 03 Javascript
JS合并两个数组的3种方法详解
Oct 24 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
同台服务器使用缓存APC效率高于Memcached的演示代码
2010/02/16 PHP
php中使用array_filter()函数过滤空数组的实现代码
2014/08/19 PHP
PHP 实现从数据库导出到.csv文件方法
2017/07/06 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
原生Js实现按的数据源均分时间点幻灯片效果(已封装)
2010/12/28 Javascript
JavaScript高级程序设计 学习笔记 js高级技巧
2011/09/20 Javascript
深入解析JavaScript中的数字对象与字符串对象
2015/10/21 Javascript
js实现截图保存图片功能的代码示例
2017/02/16 Javascript
javascript+html5+css3自定义弹出窗口效果
2017/10/26 Javascript
vue在使用ECharts时的异步更新和数据加载详解
2017/11/22 Javascript
详解html-webpack-plugin用法全解
2018/01/22 Javascript
vue.js在标签属性中插入变量参数的方法
2018/03/06 Javascript
Vue下路由History模式打包后页面空白的解决方法
2018/06/29 Javascript
vue项目中使用fetch的实现方法
2019/04/25 Javascript
JS实现水平遍历和嵌套递归操作示例
2019/08/15 Javascript
浅谈关于vue中scss公用的解决方案
2019/12/02 Javascript
Python中MySQLdb和torndb模块对MySQL的断连问题处理
2015/11/09 Python
简单掌握Python中glob模块查找文件路径的用法
2016/07/05 Python
PyQt5打开文件对话框QFileDialog实例代码
2018/02/07 Python
python实现装饰器、描述符
2018/02/28 Python
详解js文件通过python访问数据库方法
2019/03/03 Python
Python命令行参数解析工具 docopt 安装和应用过程详解
2019/09/26 Python
详解Python模块化编程与装饰器
2021/01/16 Python
澳洲在线厨具商店:Kitchen Style
2018/05/05 全球购物
美国在线旅行社:Crystal Travel
2018/09/11 全球购物
英国领先的游戏零售商:GAME
2019/09/24 全球购物
新东网科技Java笔试题
2012/07/13 面试题
2014三八妇女节活动总结
2014/03/01 职场文书
农村婚庆司仪主持词
2014/03/15 职场文书
就业导师推荐信范文
2015/03/27 职场文书
追讨欠款律师函
2015/05/27 职场文书
党支部考察意见范文
2015/06/02 职场文书
工资证明格式模板
2015/06/12 职场文书
会计继续教育培训心得体会
2016/01/19 职场文书
SQL实现LeetCode(178.分数排行)
2021/08/04 MySQL
win10电脑老是死机怎么办?win10系统老是死机的解决方法
2022/08/05 数码科技