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

 更新时间:2016年06月21日 14:32:11   作者:木耳休心  
这篇文章主要介绍了基于zepto.js简单实现上传图片的相关资料,需要的朋友可以参考下

效果如下:

html: 

<div class="otherPic">
    <div id="showOtherImage"></div>
    <span class="pull-left position_relative" id="openIdCardImg">
    <span class="icon color-blue addPic">&#xe647;</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+'">&#xe645;</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+ '">&#xe645;</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第七种数据类型Symbol的用法详解

    JavaScript第七种数据类型Symbol的用法详解

    Symbol是ES6中引入的一种新的基本数据类型,用于表示一个独一无二的值。它是JavaScript中的第七种数据类型。本文将详细讲讲Symbol的使用,需要的可以参考一下
    2022-09-09
  • javascript数组去掉重复

    javascript数组去掉重复

    去tx面试过几次,基本都会考到数组去重。其实平时工作中几乎不会用到,再者也没认真去了解过,所以基本上每次面到这里都会露出很大的马脚,面试自然也over了
    2011-05-05
  • layui动态绑定事件的方法

    layui动态绑定事件的方法

    今天小编就为大家分享一篇layui动态绑定事件的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JS+CSS实现过渡特效

    JS+CSS实现过渡特效

    这篇文章主要为大家详细介绍了JS+CSS实现过渡特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-01-01
  • Validform表单验证总结篇

    Validform表单验证总结篇

    这篇文章主要介绍了Validform表单验证,包括通用表单验证方法的知识,本文给大家介绍的非常详细具有参考借鉴价值,需要的朋友可以参考下
    2016-10-10
  • javascript中注册和移除事件的4种方式

    javascript中注册和移除事件的4种方式

    对于html中的一些元素注册事件的方式有多种,接下来将为大家详细介绍下,大家可以测试并对比下根据自己的习惯使用哪一种方式
    2013-03-03
  • Bootstrap文件上传组件之bootstrap fileinput

    Bootstrap文件上传组件之bootstrap fileinput

    这篇文章主要介绍了Bootstrap文件上传组件之bootstrap fileinput,重点是把界面做得更加友好,更好的增加用户体验。还有还多注意细节大家可以通过本文详细了解下
    2016-11-11
  • Postman无法正常返回结果问题解决

    Postman无法正常返回结果问题解决

    这篇文章主要介绍了Postman无法正常返回结果问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-08-08
  • layui table设置前台过滤转义等方法

    layui table设置前台过滤转义等方法

    今天小编就为大家分享一篇layui table设置前台过滤转义等方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • Javascript promise异步编程浅析

    Javascript promise异步编程浅析

    这篇文章主要介绍了Javascript promise异步编程,Promise 是异步编程的一种解决方案,可以替代传统的解决方案–回调函数和事件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
    2023-04-04

最新评论