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

本文实例讲述了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常用插件及用法总结》、《jQuery切换特效与技巧总结》、《jQuery遍历算法与技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

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

赞 (0)

相关推荐

  • jquery无缝图片轮播组件封装

    图片轮播在我们的前端开发中是非常常见的,下面是自己写的一个图片轮播组件,支持自动轮播,手动轮播,无缝衔接. dom结构 首先是dom结构,将所有内容放入一个大盒子,应用ul标签存放图片列表,圆点定位图片位置. <div id="box"> <ul id="banners"> <li class="banners-img"><img src="img/DSC_1913.JPG" />

  • jquery 批量上传图片实现代码

    前台: upload.htm 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="

  • jQuery移动端图片上传组件

    本文实例为大家分享了移动端图片上传组件,供大家参考,具体内容如下 Imageupload 使用File API+canvas 客户端压缩图片,并实现文件上传服务端 文件依赖 JQUERY 参数API loading:'.loading', 页面显示loading的图标selector url:'', 接收数据的api接口地址 maxFileSize:1010241024, 服务端支持的最大单文件大小 format:/^image/i, 支持的文件格式. images text ..... isC

  • 基于jquery实现图片上传本地预览功能

    当我们在上传文件时如果每次都要上传到服务器才可以预览这个做看上合理其实是不合理的,如果网速慢或图片有问题,这样不但浪费客户时间同时也浪费服务器资源了,下面我们介绍利用js上传图片时本地实现预览,希望此方法对各位有所帮助哦. 一.原理 分为两步: 当上传图片的input被触发并选择本地图片之后获取要上传的图片这个对象的URL(对象URL): 把对象URL赋值给事先写好的img标签的src属性即可把图片显示出来. 在这里,我们需要了解Javascript里File对象.Blob对象和window.U

  • Jquery ajaxsubmit上传图片实现代码

    而且未建立统一上传函数.于是将代码改造了.心想来个ajax异步上传图片吧,这技术应该很老套了.于是直接打开强大的cnblogs轻松的找到了 这篇文章 直接依葫芦画瓢,将该作者的劳动成果直接"拿来主义了".很快就把代码全改造了.可是当我把程序发布到服务器上的时问题来了.上传文件失效了!汗- 都是偷懒造成的恶果.继续打开先前参考的那篇文章.原来作者解释了只能在本地使用而不能发布到服务器上.心想我难道还得用 iframe + http post 这个 郁闷的方式么?? 于是不甘心的我打开了更

  • 使用jQuery实现验证上传图片的格式与大小

    代码很简单,常见的图片格式均已加入验证之中,小伙伴们可以直接拿去用的. 废话少说,直接上代码 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xht

  • 基于jquery的图片轮播 tab切换组件

    目前只添加了scroll和none的效果,scroll即滑动的效果,可以支持x和y方向的滑动:none就是没有任何效果,只是显示和隐藏,后续需要添加其他效果再做扩展,写的有点水,呵呵,在此留笔,防止丢失. Demo Address:http://demo.jb51.net/js/2012/sinaapp/ 复制代码 代码如下: /** * 巨无霸轮播 */ $.fn.loopSlider = function(option) { var setting = { // 默认显示的顺序 initIn

  • jquery.picsign图片标注组件实例详解

    经过几天的尝试和学习,封装了自己的第一个js组件,有很多不足之处还请赐教. 因为一些业务需求,需要给图片添加一些标注,从网上找了一些但都不能满足需求,并且存在一些bug,坑太多 因此就有想法自己封装一个,学习了其他类似组件的实现思路,以及js组件的开发思路,开发了jquery.picsign组件 jQuery图片标注组件(jquery.picsign) 在线演示:http://artlessbruin.gitee.io/picsign/ gitee:https://gitee.com/Artle

  • 基于jquery实现的上传图片及图片大小验证、图片预览效果代码

    jquery实现上传图片及图片大小验证.图片预览效果代码 上传图片验证 复制代码 代码如下: */ function submit_upload_picture(){ var file = $('file_c').value; if(!/.(gif|jpg|jpeg|png|gif|jpg|png)$/.test(file)){ alert("图片类型必须是.gif,jpeg,jpg,png中的一种") }else{ $('both_form').action="file!u

  • Jquery插件之多图片异步上传

    Jquery插件之多图片异步上传

    1.初始化上传控件数量. 复制代码 代码如下: $(document).ready(function() { $('#H_File').uploadFile({ key: 'test',count:3 }); }); 以前的设计思想是,初始化上传控件数量,页面显示为1个上传控件,每当上传成功后,在下面创建一个上传控件. 2.上传图片成功后 这就是最终的效果,如果您有更好的插件,希望一起开源. 其他的就不多说了,如果您感兴趣,点击下载源码 /201010/yuanma/jquery_aspnet_

  • jquery实现图片上传前本地预览功能

    jquery实现图片上传前本地预览功能

    本文实例为大家分享了jquery实现图片上传前预览的具体代码,供大家参考,具体内容如下 介绍之前有一个小问题,一直找不到图片预览时,图片不出来的原因,原来在于图片的路径!!!一直写的是图片的本地路径,没有什么用.直接上代码. html部分: 复制代码 代码如下: <img id="pic" src="" > <input id="upload" name="file" accept="image/*

  • jQuery图片拖动组件Dropzone用法示例

    本文实例讲述了jQuery图片拖动组件Dropzone用法.分享给大家供大家参考,具体如下: dropzone 主要功能:支持拖动图片上传,提供图片预览,等功能 参考地址:http://www.dropzonejs.com 1. 安装 npm install dropzone ,会下载一个dropzone 2. dropzone文件夹dist 下有两个文件一个dropzone.js 一个dropzone.css 将这两个文件添加到页面上 3. 初始化Dropzone ,demo代码如下 <!DO

随机推荐