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中关于Ajax的几个常用的函数
Jul 17 jQuery
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 jQuery
jQuery实现键盘回车搜索功能
Jul 25 jQuery
使用jQuery实现页面定时弹出广告效果
Aug 24 jQuery
jquery实现楼层滚动效果
Jan 01 jQuery
jquery动态添加以及遍历option并获取特定样式名称的option方法
Jan 29 jQuery
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 jQuery
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
jQuery实现当拉动滚动条到底部加载数据的方法分析
Jan 24 jQuery
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
May 12 jQuery
JQuery+drag.js上传图片并且实现图片拖曳
Nov 18 jQuery
原生jQuery实现只显示年份下拉框
Dec 24 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脚本的10个技巧(5)
2006/10/09 PHP
PHP使用Pthread实现的多线程操作实例
2015/11/14 PHP
php 将json格式数据转换成数组的方法
2018/08/21 PHP
tp5(thinkPHP5)框架实现多数据库查询的方法
2019/01/10 PHP
浅析PHP中的 inet_pton 网络函数
2019/12/16 PHP
jquery api参考 visualjquery 中国线路 速度快
2007/11/30 Javascript
使用jQuery简化Ajax开发 Ajax开发入门
2009/10/14 Javascript
在IE和VB中支持png图片透明效果的实现方法(vb源码打包)
2011/04/01 Javascript
js中的布尔运算符使用介绍
2013/11/20 Javascript
js控制表单不能输入空格的小例子
2013/11/20 Javascript
JavaScript中的style.cssText使用教程
2014/11/06 Javascript
浅谈JavaScript 框架分类
2014/11/10 Javascript
浅析$.getJSON异步请求和同步请求
2016/06/06 Javascript
基于JavaScript实现在新的tab页打开url
2016/08/04 Javascript
JavaScript标准对象_动力节点Java学院整理
2017/06/27 Javascript
ES6新增数据结构WeakSet的用法详解
2017/08/07 Javascript
nodejs实现OAuth2.0授权服务认证
2017/12/27 NodeJs
基于node.js实现爬虫的讲解
2019/02/18 Javascript
微信小程序登录session的使用
2019/03/17 Javascript
Node.js开发之套接字(socket)编程入门示例
2019/11/05 Javascript
vue页面切换项目实现转场动画的方法
2019/11/12 Javascript
JavaScript实现Tab选项卡切换
2020/02/13 Javascript
JavaScript进阶(一)变量声明提升实例分析
2020/05/09 Javascript
[03:59]5分钟带你了解什么是DOTA2(第二期)
2017/02/07 DOTA
python实现将汉字转换成汉语拼音的库
2015/05/05 Python
python入门教程之识别验证码
2017/03/04 Python
儿童编程python入门
2018/05/08 Python
使用Python对Dicom文件进行读取与写入的实现
2020/04/20 Python
如何完美的建立一个python项目
2020/10/09 Python
Html5内唤醒百度、高德APP的实现示例
2019/05/20 HTML / CSS
Stuart Weitzman美国官网:美国奢华鞋履品牌
2016/08/18 全球购物
宣传工作经验材料
2014/06/02 职场文书
乡镇机关党员民主评议表自我评价
2014/09/21 职场文书
领导班子专题民主生活会情况想汇报
2014/09/30 职场文书
opencv读取视频并保存图像的方法
2021/06/04 Python
JavaScript数组 几个常用方法总结
2021/11/11 Javascript