效果如下:

     <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>

html

 .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:; left:; width:3rem; height:3rem; opacity:;}
.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);
};
};

上传图片(基于zepto.js)的更多相关文章

  1. 加减号改变input[type=number]的数值,基于[zepto.js]

    通过点击加减号可以更改input的数值,样式如下图: 具体的html代码如下: <div class="xh-lxx-cart-count1"> <span cl ...

  2. 相册弹窗(基于zepto.js)

    //放大图片 $(page).on('click','.popupImage img',function () { var that = $(this); that.popupImage({ this ...

  3. 省市选择(基于zepto.js)

    效果如下: <div class="clList overflow-h mt75"> <select class="pull-left cl-35 se ...

  4. zepto.js 处理Touch事件(实例)

    处理Touch事件能让你了解到用户的每一根手指的位置,在touch事件触发的时候产生,可以通过touch event handler的event对象取到,如果基于zepto.js开发,一般是通过eve ...

  5. zepto.js swipe实现触屏tab菜单

    今天我们来说下zepto.js,有兴趣的朋友可以先进这个网站“http://zeptojs.com/” ,这个可以说是手机里的jquery,但是它取消了hover,加上了swipe及tap这两个触屏功 ...

  6. zepto.js 处理Touch事件

    处 理Touch事件能让你了解到用户的每一根手指的位置,在touch事件触发的时候产生,可以通过touch event handler的event对象取到,如果基于zepto.js开发,一般是通过ev ...

  7. 怎么使用zepto.js的tap事件引起的探索

    前言:   在使用zepto.js之前,你首先要知道它是什么?为什么要使用它?以及它和jquery有什么区别? ①:简单来说zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与j ...

  8. zepto.js的touch模块

     touch库实现了什么和引入背景 touch模块是基于zepto.js的. click事件在移动端上会有 300ms 的延迟,同时因为需要 长按 , 双触击 等富交互,所以我们通常都会引入类似 ze ...

  9. Zepto.js touch,tap增加 touch模块深入分析

    1. touch库实现了什么和引入背景 click事件在移动端上会有 300ms 的延迟,同时因为需要 长按 , 双触击 等富交互,所以我们通常都会引入类似 zepto 这样的库.zepto 中tou ...

随机推荐

  1. 关于 " +new Date " 的个人见解

    今天晚上,在一个Javascript的Q群里,有人问下面这种代码是什么意思: var time = +new Date; 这段代码中,比较奇怪的是有一个加号,下面说说我个人的理解:这是对后面的对象做一 ...

  2. 用 Graphviz 可视化函数调用

    http://www.ibm.com/developerworks/cn/linux/l-graphvis/

  3. spring源码分析之spring-messaging模块详解

    0 概述 spring-messaging模块为集成messaging api和消息协议提供支持. 其代码结构为: 其中base定义了消息Message(MessageHeader和body).消息处 ...

  4. LINUX命令之ETHTOOL用法详解

    转载:http://crazyming.blog.51cto.com/1048571/738022 debian 下安装: sudo apt-get install ethtool 或者下载源码编译: ...

  5. Java(Android)编程思想笔记01:多态性的理解

    1. 多态的定义: 指允许不同类的对象对同一消息做出响应.即同一消息可以根据发送对象的不同而采用多种不同的行为方式. (发送消息就是函数调用)   2. 多态的理解    多态是面向对象的重要特性,简 ...

  6. Oracle 中记录用户登录信息

    我们可以使用 Oracle Audit 函数来记录用户登录信息,但是如果开放了 Audit 函数将会使 Oracle 性能下降,甚至导致 Oracle 崩溃.那我们如何才能记录用户登录信息呢?其实我们 ...

  7. python(5)- sys.stdout()实现进度条

    1. 使用\r , 让其始终在行首输出,实现进度条 import sys, time ''' 使用\r 来实现进度条的效果,\r 是光标移到行首但不换行. 假设文件大小为60,一下下载1, 下载到60 ...

  8. vb中的null.nothing.empty区别

    以下内容源自互联网: 变量 A.B.C.D 分别等于 0."".Null. Empty. Nothing 的哪一个? Dim A Dim B As String Dim C As ...

  9. poj 2449 第k短路径

    思路: 利用一个估计函数g[i]=dis[i]+len.其中len为队列出来的点当前已经走了的距离.dis[i]为该点到终点的最短路径.这样我们只要将点按g[i]的升序在队列你排序,每次取出最小的g[ ...

  10. cent0s7 显卡驱动导致重启黑屏

    由于 CentOS7.0 版本与前面的 CentOS6.5 及之前的版本的模式变更方法有很大 的不同,以前的版本中我们可以在vi /etc/inittab 文件中将id:5:initdefault 更 ...