基于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 获取用户客户端操作系统版本
Aug 25 Javascript
多浏览器兼容的获取元素和鼠标的位置的js代码
Dec 15 Javascript
理解Javascript_07_理解instanceof实现原理
Oct 15 Javascript
兼容FF和IE的动态table示例自写
Oct 21 Javascript
JavaScript实现点击按钮切换网页背景色的方法
Oct 17 Javascript
jQuery实现验证年龄简单思路
Feb 24 Javascript
javascript中eval解析JSON字符串
Feb 27 Javascript
javascript运算符——位运算符全面介绍
Jul 14 Javascript
AngularJS中的表单简单入门
Jul 28 Javascript
jquery 动态合并单元格的实现方法
Aug 26 Javascript
快速了解vue-cli 3.0 新特性
Feb 28 Javascript
JavaScript 引用类型实例详解【数组、对象、严格模式等】
May 13 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
让这部DC动画新作刷新你的认知
2020/03/03 欧美动漫
PHP脚本数据库功能详解(下)
2006/10/09 PHP
按上下级层次关系输出内容的PHP代码
2010/07/17 PHP
php对mongodb的扩展(初出茅庐)
2012/11/11 PHP
Yii使用Captcha验证码的方法
2015/12/28 PHP
php 访问oracle 存储过程实例详解
2017/01/08 PHP
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
基于ThinkPHP删除目录及目录文件函数
2020/10/28 PHP
js RuntimeObject() 获取ie里面自定义函数或者属性的集合
2010/11/23 Javascript
jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)
2012/05/23 Javascript
jQuery中:animated选择器用法实例
2014/12/29 Javascript
JavaScript返回0-1之间随机数的方法
2015/04/06 Javascript
vue.js移动端app实战1:初始配置详解
2017/07/24 Javascript
js 获取html5的data属性实现方法
2017/07/28 Javascript
jQuery实现适用于移动端的跑马灯抽奖特效示例
2019/01/18 jQuery
Node.js中出现未捕获异常的处理方法
2020/06/29 Javascript
vue实现的多页面项目如何优化打包的步骤详解
2020/07/19 Javascript
[02:49]2018DOTA2亚洲邀请赛主赛事决赛日战况回顾 Mineski鏖战5局夺得辉耀
2018/04/10 DOTA
Python 多线程抓取图片效率对比
2016/02/27 Python
python3.5+tesseract+adb实现西瓜视频或头脑王者辅助答题
2018/01/17 Python
python 获取一个值在某个区间的指定倍数的值方法
2018/11/12 Python
Python实现最常见加密方式详解
2019/07/13 Python
通过实例简单了解Python中yield的作用
2019/12/11 Python
Python PyPDF2模块安装使用解析
2020/01/19 Python
Python TKinter如何自动关闭主窗口
2020/02/26 Python
理肤泉美国官网:La Roche-Posay
2018/01/17 全球购物
艺术用品:Arteza
2018/11/25 全球购物
华为C++笔试题
2014/08/05 面试题
电气工程和自动化自荐信范文
2013/12/25 职场文书
会计人员岗位职责
2014/03/19 职场文书
幼儿园亲子活动总结
2014/04/26 职场文书
2014教师党员自我评议(5篇)
2014/09/20 职场文书
群众路线个人对照检查材料2014
2014/09/26 职场文书
党的群众路线教育实践活动批评与自我批评发言稿
2014/10/16 职场文书
2015年教师节感言
2015/08/03 职场文书
家庭教育培训学习心得体会
2016/01/14 职场文书