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 Firefox 使用自定义标签的区别
Oct 15 Javascript
使用jQuery内容过滤选择器选择元素实例讲解
Apr 18 Javascript
javascript仿php的print_r函数输出json数据
Sep 13 Javascript
利用AngularJs实现京东首页轮播图效果
Sep 08 Javascript
正则 js分转元带千分符号详解
Mar 08 Javascript
获取url中用&amp;隔开的参数实例(分享)
May 28 Javascript
Sublime Text新建.vue模板并高亮(图文教程)
Oct 26 Javascript
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
利用原生JavaScript实现造日历轮子实例代码
May 08 Javascript
微信小程序实现左侧滑动导航栏
Apr 08 Javascript
vue 子组件修改data或调用操作
Aug 07 Javascript
插件导致ECharts被全量引入的坑示例解析
Sep 23 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
《星际争霸》各版本雷兽特点图文解析 雷兽不同形态一览
2020/03/02 星际争霸
php下载远程文件类(支持断点续传)
2008/11/14 PHP
统计jQuery中各字符串出现次数的工具
2012/05/03 Javascript
关于页面嵌入swf覆盖div层的问题的解决方法
2014/02/11 Javascript
DOM节点深度克隆函数cloneNode()用法实例
2015/01/12 Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
2016/09/23 Javascript
jQuery中用on绑定事件时需注意的事项
2017/03/19 Javascript
Angular.js中控制器之间的传值详解
2017/04/24 Javascript
微信小程序wx.request实现后台数据交互功能分析
2017/11/25 Javascript
深入浅析Vue全局组件与局部组件的区别
2018/06/15 Javascript
Vue实现自定义下拉菜单功能
2018/07/16 Javascript
写一个Vue Popup组件
2019/02/25 Javascript
[02:28]DOTA2英雄基础教程 狼人
2013/12/23 DOTA
[45:32]Liquid vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
[55:54]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
[02:12]Dota 2 推出全新英雄—— 电炎绝手
2019/08/23 DOTA
跟老齐学Python之正规地说一句话
2014/09/28 Python
浅析python协程相关概念
2018/01/20 Python
详解Python3 pandas.merge用法
2019/09/05 Python
Python装饰器原理与基本用法分析
2020/01/07 Python
python中pathlib模块的基本用法与总结
2020/08/17 Python
python中复数的共轭复数知识点总结
2020/12/06 Python
美国最大的旗帜经销商:Carrot-Top
2018/02/26 全球购物
购买英国原创艺术:Art Gallery
2018/08/25 全球购物
美国领先的低折扣旅行网站:Hotwire
2019/01/19 全球购物
关于递归的一道.NET面试题
2013/05/12 面试题
毕业生物理教师求职信
2013/10/17 职场文书
茶叶生产计划书
2014/01/10 职场文书
公务员平时考核实施方案
2014/03/11 职场文书
党的群众路线对照检查材料
2014/09/22 职场文书
公司副总经理岗位职责
2014/10/01 职场文书
小区环境卫生倡议书
2015/04/29 职场文书
新党员入党决心书
2015/09/22 职场文书
2019秋季运动会口号
2019/06/25 职场文书
MySQL实例精讲单行函数以及字符数学日期流程控制
2021/10/15 MySQL
世界十大评分最高的动漫,CLANNAD上榜,第八赚足人们眼泪
2022/03/18 日漫