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 相关文章推荐
浏览器无法运行JAVA脚本的解决方法
Jan 09 Javascript
jQuery中的常用事件总结
Dec 27 Javascript
JQuery 常用操作代码
Mar 14 Javascript
解析javascript系统错误:-1072896658的解决办法
Jul 08 Javascript
JavaScript数据结构与算法之栈详解
Mar 12 Javascript
JavaScript中的依赖注入详解
Mar 18 Javascript
Node.js Sequelize如何实现数据库的读写分离
Oct 23 Javascript
完美实现js选项卡切换效果(一)
Mar 08 Javascript
微信小程序之选项卡的实现方法
Sep 29 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 jQuery
使用js实现一个简单的滚动条过程解析
Sep 10 Javascript
基于postman获取动态数据过程详解
Sep 08 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建立文件夹代码
2015/01/06 PHP
Prototype使用指南之ajax
2007/01/10 Javascript
js实现新浪微博首页效果
2015/10/16 Javascript
用JS写的一个Ajax库(实例代码)
2016/08/06 Javascript
BootStrap iCheck插件全选与获取value值的解决方法
2016/08/24 Javascript
JQuery Ajax WebService传递参数的简单实例
2016/11/02 Javascript
使用vue.js编写蓝色拼图小游戏
2017/03/17 Javascript
angular实现图片懒加载实例代码
2017/06/08 Javascript
AngularJS中下拉框的高级用法示例
2017/10/11 Javascript
mint-ui的search组件在键盘显示搜索按钮的实现方法
2017/10/27 Javascript
浅谈vue项目重构技术要点和总结
2018/01/23 Javascript
JS+HTML5实现获取手机验证码倒计时按钮
2018/08/08 Javascript
详解js根据百度地图提供经纬度计算两点距离
2019/05/13 Javascript
聊聊Vue 中 title 的动态修改问题
2019/06/11 Javascript
15 分钟掌握vue-next响应式原理
2019/10/13 Javascript
微信小程序仿淘宝热搜词在搜索框中轮播功能
2020/01/21 Javascript
解决vue加scoped后就无法修改vant的UI组件的样式问题
2020/09/07 Javascript
vue-cli —— 如何局部修改Element样式
2020/10/22 Javascript
javascript全局自定义鼠标右键菜单
2020/12/08 Javascript
Pandas之Fillna填充缺失数据的方法
2019/06/25 Python
在PyCharm中实现添加快捷模块
2020/02/12 Python
在html5的Canvas上绘制椭圆的几种方法总结
2013/01/07 HTML / CSS
html5 css3网站菜单实现代码
2013/12/23 HTML / CSS
南非领先的在线旅行社:Travelstart南非
2016/09/04 全球购物
全球速卖通法国在线交易平台:AliExpress法国
2017/07/07 全球购物
Bravofly德国:预订廉价航班和酒店
2019/09/22 全球购物
社区庆中秋节活动方案
2014/02/07 职场文书
事业单位分类改革实施方案
2014/03/21 职场文书
初中英语演讲稿
2014/04/29 职场文书
祖国在我心中演讲稿600字
2014/09/23 职场文书
业务员工作态度散漫检讨书
2014/11/02 职场文书
开除通知书范本
2015/04/25 职场文书
科技活动总结范文
2015/05/11 职场文书
篮球拉拉队口号
2015/12/25 职场文书
Netty结合Protobuf进行编解码的方法
2021/06/26 Java/Android
Python中super().__init__()测试以及理解
2021/12/06 Python