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加密密码到cookie的实现代码
Apr 18 jQuery
jQuery 控制文本框自动缩小字体填充
Jun 16 jQuery
jQuery实现点击关注和取消功能
Jul 03 jQuery
jQuery实现拼图小游戏(实例讲解)
Jul 24 jQuery
jQuery实现广告条滚动效果
Aug 22 jQuery
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 jQuery
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 jQuery
基于jQuery.i18n实现web前端的国际化
May 04 jQuery
jQuery实现checkbox全选功能完整实例
Jul 12 jQuery
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 jQuery
jQuery实现简易QQ聊天框
Feb 10 jQuery
jQuery带控制按钮轮播图插件
Jul 31 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 不错的学习资料
2009/02/06 PHP
基于php验证码函数的使用示例
2013/05/03 PHP
PHP页面中文乱码分析
2013/10/29 PHP
php环境套包 dedeampz 伪静态设置示例
2014/03/26 PHP
php简单实现发送带附件的邮件
2015/06/10 PHP
PHP实现生成唯一会员卡号
2015/08/24 PHP
thinkPHP中create方法与令牌验证实例浅析
2015/12/08 PHP
根据分辨率不同,调用不同的css文件
2006/07/07 Javascript
对采用动态原型方式无法展示继承机制得思考
2009/12/04 Javascript
实例分析js和C#中使用正则表达式匹配a标签
2014/11/26 Javascript
js兼容火狐获取图片宽和高的方法
2015/05/21 Javascript
jQuery控制frames及frame页面JS的方法
2016/03/08 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
2016/06/13 Javascript
Three.js学习之Lamber材质和Phong材质
2016/08/04 Javascript
AngularJS服务service用法总结
2016/12/13 Javascript
JS中利用localStorage防止页面动态添加数据刷新后数据丢失
2017/03/10 Javascript
Node.js使用Koa搭建 基础项目
2018/01/08 Javascript
浅析前端路由简介以及vue-router实现原理
2018/06/01 Javascript
element-ui表格列金额显示两位小数的方法
2018/08/24 Javascript
NodeJS如何实现同步的方法示例
2018/08/24 NodeJs
JavaScript解析及序列化JSON的方法实例分析
2019/01/04 Javascript
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
2019/04/01 Javascript
layui实现数据表格自定义数据项
2019/10/26 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
2020/06/19 Javascript
Python操作MongoDB数据库PyMongo库使用方法
2015/04/27 Python
python3中str(字符串)的使用教程
2017/03/23 Python
详解python之配置日志的几种方式
2017/05/22 Python
Python中的id()函数指的什么
2017/10/17 Python
对Python3中bytes和HexStr之间的转换详解
2018/12/04 Python
django mysql数据库及图片上传接口详解
2019/07/18 Python
python数据预处理 :数据共线性处理详解
2020/02/24 Python
Python中的With语句的使用及原理
2020/07/29 Python
python基于爬虫+django,打造个性化API接口
2021/01/21 Python
英格兰足协官方商店:England Store
2019/07/12 全球购物
马来西亚排名第一的宠物用品店:Pets Wonderland
2020/04/16 全球购物
中专三年学习的个人自我评价
2013/12/12 职场文书