jQuery实现移动端图片上传预览组件的方法分析


Posted in jQuery onMay 01, 2020

本文实例讲述了jQuery实现移动端图片上传预览组件的方法。分享给大家供大家参考,具体如下:

之前的一篇博客:移动端H5图片预览和压缩,实现了基本的功能。这次则计划做成一个组件,可供前台、后台使用。

首先,我们先来捋一捋想要实现的功能:

  • 预览
  • 删除
  • 压缩
  • 上传到服务器

基本机构

这样,我们的组件结构就有了:

;!function(window, $, undefined){
  function Upload() { };

  Upload.prototype.change = function() { };

  Upload.prototype.del = function() { };

  Upload.prototype.compress = function() { };

  Upload.prototype.submit = function() { };

}(window, jQuery)

主要API

接下来,介绍一下组件需要用到的几个API:

  • FileList
````
// 获取上传文件的 FileList
document.getElementById('inputId').files
````
  • window.URL.createObjectURL(file):返回一个关于图片地址url的blob格式
  • createImageBitmap(file):返回一个imageBitmap对象,它包含着文件的相关信息
  • canvas.drawImage(imageBitmap):将图片画在canvas画布上,对图片大小进行缩放
  • canvas.toBlob():转化为blob对象,可以对图片质量进行更改
  • FormData:将上传图片保存在FormData的实例上,上传到服务器

DEMO:https://github.com/CaptainLiao/zujian/tree/master/Upload

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
基于jQuery Easyui实现登陆框界面
Jul 10 jQuery
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
使用jQuery实现页面定时弹出广告效果
Aug 24 jQuery
jquery 键盘事件的使用方法详解
Sep 13 jQuery
jQuery插件artDialog.js使用与关闭方法示例
Oct 09 jQuery
jQuery实现的简单手风琴效果示例
Aug 29 jQuery
jQuery+Datatables实现表格批量删除功能【推荐】
Oct 24 jQuery
详解jQuery-each()方法
Mar 13 jQuery
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
jQuery操作元素的内容和样式完整实例分析
Jan 10 jQuery
JQuery获得内容和属性方法解析
May 30 jQuery
JavaScript枚举选择jquery插件代码实例
Nov 17 jQuery
jQuery实现的上拉刷新功能组件示例
May 01 #jQuery
jQuery实现的解析本地 XML 文档操作示例
Apr 30 #jQuery
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 #jQuery
jQuery实现高度灵活的表单验证功能示例【无UI】
Apr 30 #jQuery
jQuery插件simplePagination的使用方法示例
Apr 28 #jQuery
jquery检测上传文件大小示例
Apr 26 #jQuery
jquery实现轮播图特效
Apr 12 #jQuery
You might like
php实现的常见排序算法汇总
2014/09/08 PHP
PHP CURL 内存泄露问题解决方法
2015/02/12 PHP
win10环境PHP 7 安装配置【教程】
2016/05/09 PHP
Laravel 5.3 学习笔记之 安装
2016/08/28 PHP
yii2局部关闭(开启)csrf的验证的实例代码
2017/07/10 PHP
PHP基于openssl实现非对称加密代码实例
2020/06/19 PHP
js 实现无缝滚动 兼容IE和FF
2009/07/15 Javascript
优化innerHTML操作(提高代码执行效率)
2011/08/20 Javascript
jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法
2015/03/25 Javascript
在JS方法中返回多个值的方法汇总
2015/05/20 Javascript
js获取时间精确到秒(年月日)
2016/03/16 Javascript
JQuery动态添加Select的Option元素实现方法
2016/08/29 Javascript
nodejs简单实现TCP服务器端和客户端的聊天功能示例
2018/01/04 NodeJs
详解vue.js数据传递以及数据分发slot
2018/01/20 Javascript
微信小程序Flex布局用法深入浅出分析
2019/04/25 Javascript
新手简单了解vue
2019/05/29 Javascript
JS实现水平遍历和嵌套递归操作示例
2019/08/15 Javascript
vue中渲染对象中属性时显示未定义的解决
2020/07/31 Javascript
[47:04]LGD vs infamous Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
Python3 循环语句(for、while、break、range等)
2017/11/20 Python
Python处理菜单消息操作示例【基于win32ui模块】
2018/05/09 Python
Python获取好友地区分布及好友性别分布情况代码详解
2019/07/10 Python
关于python字符串方法分类详解
2019/08/20 Python
Python实现图片添加文字
2019/11/26 Python
python创建子类的方法分析
2019/11/28 Python
python plt可视化——打印特殊符号和制作图例代码
2020/04/17 Python
keras处理欠拟合和过拟合的实例讲解
2020/05/25 Python
Python DataFrame使用drop_duplicates()函数去重(保留重复值,取重复值)
2020/07/20 Python
python实现暗通道去雾算法的示例
2020/09/27 Python
彪马美国官网:PUMA美国
2017/03/09 全球购物
Janie and Jack美国官网:GAP旗下的高档童装品牌
2019/09/09 全球购物
高中生的自我评价
2014/03/04 职场文书
初中军训感想300字
2014/03/05 职场文书
有兼职工作经历的简历自我评价
2014/03/07 职场文书
表决心的诗句大全
2014/03/11 职场文书
修改Nginx配置返回指定content-type的方法
2022/09/23 Servers