基于zepto.js简单实现上传图片


Posted in Javascript onJune 21, 2016

效果如下:

基于zepto.js简单实现上传图片

html: 

<div class="otherPic">
    <div id="showOtherImage"></div>
    <span class="pull-left position_relative" id="openIdCardImg">
    <span class="icon color-blue addPic"></span>
    <input type="file" class="yy_inputFile" id="other_inputFile" name="reasonImg" />
    </span>
   </div>
.basicInfo .item{ padding:.5rem .5rem 0; border-top:.3rem solid #eeeeee;}
.basicInfo li{ overflow:hidden; margin-bottom:.5rem;line-height:2.1rem; border-bottom:1px solid #e3e3e3;}
.basicInfo li:last-child{ border-bottom:none;}
.basicInfo input[type="text"]{ height:2rem; line-height:2rem;}
.basicInfo textarea{ height:8rem; line-height:1.5rem;}
.basicInfo .otherPic{ min-height:3rem;}
.basicInfo .otherPic .addPic{ height:3rem; line-height:3rem; font-size:3rem; margin-bottom:.5rem;}
.basicInfo .otherPic img{ margin:0 .5rem .5rem 0; width:3rem; height:3rem; vertical-align:top; border:1px solid #ddd;}
.basicInfo .yy_inputFile{ position:absolute; top:0; left:0; width:3rem; height:3rem; opacity:0;}
.basicInfo .aboutPic{ margin-bottom:.5rem; line-height:1.5rem; }

js: 

var img_arr = new Array();
 //相关图片
 $(page).on('change','#other_inputFile',function () {
  $(this).resizeImage({
  that:this,
  cutWid:'',
  quality:0.6,
  limitWid:710,
  success:function (data) {
   var len = $('#showOtherImage').find('img').size();
   img_arr[len] = data.base64;
   var img = '<div class="position_relative display-inlineBlock" style="float:left;">' +
   '<img src="' + img_arr[len] + '">' +
   '<span class="icon deletedImages" sid="' +len+ '" id="other_img_'+len+'"></span>'+
   '</div>';
   $('#showOtherImage').append(img);
   if(img_arr.length == 9){
   $('#openIdCardImg').hide();
   return false;
   }
  }
  });
  this.value = '';
 });

 //删除相关图片
 $(page).on('click','.deletedImages',function () {
  var sid = $(this).attr('sid');

  img_arr.splice(sid,1);
  $(this).parent().remove();

  $('#showOtherImage').html('');
  for( var i=0; i < img_arr.length; i++) {
  var img = '<div class="position_relative display-inlineBlock" style="float:left;">' +
   '<img src="' + img_arr[i] + '">' +
   '<span class="icon deletedImages" sid="' +i+ '" id="other_img_' +i+ '"></span>'+
   '</div>';
  $('#showOtherImage').append(img);
  }

  if(img_arr.length < 9){
  $('#openIdCardImg').show();
  }else{
  $('#openIdCardImg').hide();
  }
 });

/*
 * 裁剪图片
 * $(id).resizeImage({
 * that:this, //当前图片对象
 * cutWid:'', //裁剪尺寸
 * quality:0.6, //图片质量0~1
 * limitWid:400, //最小宽度
 * success:function (data) {
 * do something... 
 * }
 * })
 *
 * */
 $.fn.resizeImage = function (obj) {
 var file = obj.that.files[0];
 var URL = window.URL || window.webkitURL;
 var blob = URL.createObjectURL(file);
 var base64;

 var img = new Image();
 img.src = blob;

 if(!/image\/\w+/.test(obj.that.files[0].type)){
  $.toast("请上传图片!",1000);
  return false;
 }

 img.onload = function() {
  if(img.width < obj.limitWid){
  $.toast('图片宽度不得小于'+ obj.limitWid +'px',1000);
  return false;
  }
  var that = this;

  //生成比例
  var w,scale,h = that.height;
  if(obj.cutWid == ''){
  w = that.width;
  }else{
  w = obj.cutWid;
  }
  scale = w / h;
  h = w / scale;

  //生成canvas
  var canvas = document.createElement('canvas');
  var ctx = canvas.getContext('2d');
  $(canvas).attr({
  width: w,
  height: h
  });
  ctx.drawImage(that, 0, 0, w, h);

  // 生成base64
  base64 = canvas.toDataURL('image/jpeg', obj.quality || 0.8);
  var result = {
  base64:base64
  };

  //成功后的回调
  obj.success(result);
 };
 };

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript可否多线程? 深入理解JavaScript定时机制
May 23 Javascript
Jquery:ajax实现翻页无刷新功能代码
Aug 05 Javascript
jQuery关于导航条背景切换效果实现示例
Sep 04 Javascript
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
Jan 22 Javascript
JS+JSP通过img标签调用实现静态页面访问次数统计的方法
Dec 14 Javascript
vue自定义指令实现v-tap插件
Nov 03 Javascript
浅谈Node异步编程的机制
Oct 18 Javascript
webstorm中配置Eslint的两种方式及差异比较详解
Oct 19 Javascript
vue移动端项目缓存问题实践记录
Oct 29 Javascript
Three.js实现3D机房效果
Dec 30 Javascript
layui异步加载table表中某一列数据的例子
Sep 16 Javascript
js数组的基本使用总结
Jan 18 Javascript
第一篇初识bootstrap
Jun 21 #Javascript
JavaScript实现相册弹窗功能(zepto.js)
Jun 21 #Javascript
省市选择的简单实现(基于zepto.js)
Jun 21 #Javascript
JavaScript实现移动端滑动选择日期功能
Jun 21 #Javascript
bootstrap学习笔记之初识bootstrap
Jun 21 #Javascript
Javascript实现图片加载从模糊到清晰显示的方法
Jun 21 #Javascript
Javascript类型系统之String字符串类型详解
Jun 21 #Javascript
You might like
业余方法DIY电子管FM收音机
2021/03/02 无线电
水质对咖图啡风味的影响具体有哪些
2021/03/03 冲泡冲煮
php封装好的人民币数值转中文大写类
2015/12/20 PHP
PHP编程获取图片的主色调的方法【基于Imagick扩展】
2017/08/02 PHP
PHP开发API接口签名生成及验证操作示例
2020/05/27 PHP
JavaScript转换农历类实现及调用方法
2013/01/27 Javascript
JSCode all of Brower 全局屏蔽网页右键功能 具体实现
2013/06/05 Javascript
Jquery的hide及toggle方法让超链接慢慢消失
2013/09/06 Javascript
js简单工厂模式用法实例
2015/06/30 Javascript
jQuery处理XML文件的几种方法
2016/06/14 Javascript
微信公众号 摇一摇周边功能开发
2016/12/08 Javascript
设置jquery UI 控件的大小方法
2016/12/12 Javascript
正则验证小数点后面只能有两位数的方法
2017/02/28 Javascript
JavaScript简单实现关键字文本搜索高亮显示功能示例
2018/07/25 Javascript
微信小程序仿淘宝热搜词在搜索框中轮播功能
2020/01/21 Javascript
python3实现短网址和数字相互转换的方法
2015/04/28 Python
Python base64编码解码实例
2015/06/21 Python
python列表的常用操作方法小结
2016/05/21 Python
Python3 中文文件读写方法
2018/01/23 Python
TensorFlow中权重的随机初始化的方法
2018/02/11 Python
python搭建服务器实现两个Android客户端间收发消息
2018/04/12 Python
tensorflow实现图像的裁剪和填充方法
2018/07/27 Python
Python多线程原理与用法实例剖析
2019/01/22 Python
如何使用Python自动控制windows桌面
2019/07/11 Python
Pymysql实现往表中插入数据过程解析
2020/06/02 Python
Python基于xlrd模块处理合并单元格
2020/07/28 Python
澳大利亚正品化妆品之家:Cosmetic Capital
2017/07/03 全球购物
爱尔兰电脑、家电和家具购物网站:Buy It Direct
2019/07/09 全球购物
英国最好的包装供应商:Priory Direct
2019/12/17 全球购物
什么是静态路由?什么是动态路由?各自的特点是什么?
2015/09/16 面试题
质检部岗位职责
2013/11/11 职场文书
妇女儿童发展规划实施方案
2014/03/16 职场文书
产假请假条
2014/04/10 职场文书
民政局未婚证明
2015/06/15 职场文书
在酒桌上的敬酒词
2015/08/12 职场文书
POST提交数据常见的四种方式
2022/01/18 HTML / CSS