基于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 相关文章推荐
让getElementsByName适应IE和firefox的方法
Sep 24 Javascript
JS二维数组的定义说明
Mar 03 Javascript
纯JavaScript实现的兼容各浏览器的添加和移除事件封装
Mar 28 Javascript
JavaScript获取IP获取的是IPV6 如何校验
Jun 12 Javascript
JS中Array数组学习总结
Jan 18 Javascript
js鼠标跟随运动效果
Mar 11 Javascript
vue.js中指令Directives详解
Mar 20 Javascript
详解win7 cmd执行vue不是内部命令的解决方法
Jul 27 Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
Aug 13 Javascript
三步实现ionic3点击退出app程序
Sep 17 Javascript
详解JavaScript执行模型
Nov 16 Javascript
jquery实现点击左右按钮切换图片
Jan 27 jQuery
第一篇初识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
mysql5的sql文件导入到mysql4的方法
2008/10/19 PHP
PHP 定界符 使用技巧
2009/06/14 PHP
调试WordPress中定时任务的相关PHP脚本示例
2015/12/10 PHP
在Mac OS下搭建LNMP开发环境的步骤详解
2017/03/10 PHP
PHP实现一个轻量级容器的方法
2019/01/28 PHP
记Laravel调用Gin接口调用formData上传文件的实现方法
2019/12/12 PHP
在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题
2010/11/28 Javascript
实现变速回到顶部的JavaScript代码
2011/05/09 Javascript
javascript小组件 原生table排序表格脚本(兼容ie firefox opera chrome)
2012/07/25 Javascript
javascript变量作用域使用中常见错误总结
2013/03/26 Javascript
javascript实现详细时间提醒信息效果的方法
2015/03/11 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
2015/11/29 Javascript
JS模拟按钮点击功能的方法
2015/12/22 Javascript
KnockoutJs快速入门教程
2016/05/16 Javascript
用原生js统计文本行数的简单示例
2016/08/19 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
2017/03/15 Javascript
详解用vue.js和laravel实现微信授权登陆
2017/06/23 Javascript
详解用Node.js写一个简单的命令行工具
2018/03/01 Javascript
vuex页面刷新后数据丢失的方法
2019/01/17 Javascript
微信小程序获取用户信息及手机号(后端TP5.0)
2019/09/12 Javascript
JavaScript 实现HTML DOM增删改查操作的常见方法详解
2020/01/04 Javascript
vue实现全屏滚动效果(非fullpage.js)
2020/03/07 Javascript
iview实现图片上传功能
2020/06/29 Javascript
在Python中使用matplotlib模块绘制数据图的示例
2015/05/04 Python
Python解析json文件相关知识学习
2016/03/01 Python
CentOS 6.5下安装Python 3.5.2(与Python2并存)
2017/06/05 Python
python实现电子产品商店
2019/02/26 Python
Html5写一个简单的俄罗斯方块小游戏
2019/12/03 HTML / CSS
日本最大的药妆连锁店:Matsukiyo松本清药妆店
2017/11/23 全球购物
长曲棍球装备:Lacrosse Monkey
2020/12/02 全球购物
JAVA软件工程师测试题
2014/07/25 面试题
行政助理的职责
2013/11/14 职场文书
十一酒店活动方案
2014/02/20 职场文书
企业精细化管理实施方案
2014/03/23 职场文书
2016高校自主招生自荐信范文
2016/01/28 职场文书
Docker与K8s关系介绍不会Docker也可以使用K8s
2022/06/25 Servers