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

编程学习 2021-07-04 15:02www.dzhlxh.cn编程入门
这篇文章主要介绍了jQuery实现移动端图片上传预览组件的方法,结合实例形式分析了jQuery移动端图片上传预览组件的实现原理、核心代码与相关注意事项,需要的朋友可以参考下

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

之前的一篇博客:,实现了基本的功能。这次则计划做成一个组件,可供前台、后台使用。

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

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

基本机构

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

;!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:

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》、《》、《》及《》

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

Copyright © 2016-2025 www.dzhlxh.cn 金源码 版权所有 Power by

网站模板下载|网络推广|微博营销|seo优化|视频营销|网络营销|微信营销|网站建设|织梦模板|小程序模板