这篇文章主要介绍了基于zepto.js简单实现上传图片的相关资料,需要的朋友可以参考下
效果如下：
html:
<div>
<div id="showOtherImage"></div>
<span id="openIdCardImg">
<span></span>
<input type="file" 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>' +
'<img src="' + img_arr[len] + '">' +
'<span 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>' +
'<img src="' + img_arr[i] + '">' +
'<span 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);
};
};
以上就是本文的全部内容，希望对大家的学习有所帮助
- 2017年泰安市岱岳区事业单位招聘工作人员报名时间
- 2017年泰安市岱岳区事业单位招聘工作人员简章
- 2017年泰安市岱岳区事业单位招聘工作人员应聘须知
- 2017年泰安市岱岳区事业单位招聘工作人员岗位信息汇总表
- 2017年温州市乐清市卫计系统招聘医药卫生类毕业生第一批单向选择聘用单位结果公告
- 楚雄州双柏县妥甸小学2017年公开招考教师实施方案
- 楚雄州双柏县妥甸中学2017年招考教师实施方案
- 上海市事业单位招聘考试信息20170719
- 浙江省事业单位招聘考试信息20170719
- 楚雄州双柏县职业高级中学2017年招考教师实施方案
- 2017年文山州水务局紧缺岗位报名情况及面试通知
- 江苏省事业单位招聘考试信息20170719
- 四川省事业单位招聘考试信息20170719
- 福建省事业单位招聘考试信息20170719
- 北京市事业单位招聘考试信息20170719
- 广东省事业单位招聘考试信息20170719
- 2017年昆明市公路工程质量检测中心专业技术人员招聘
- 文山州砚山县第三高级中学2017年选调高中教师公告
- 2017年文山州砚山县教育局选调初中小学幼儿园教师公告
- 玉溪市通海县第一中学2017年公开选调校医公告
- 玉溪市通海县教育系统2017年县外选调中小学教师公告
- 2017年普洱市公安局思茅分局招聘勤务辅警公告
- 昆明市寻甸县2017年卫生计生系统事业单位招聘资格复审公告
- 昆明市寻甸县教育系统2017年招聘教师笔试成绩及资格复审公告
- 昆明市寻甸县2017年定向招聘事业单位笔试成绩及资格复审公告
- cramps
- cramp sb's style
- cramp-sb-s-style
- cramp someone's style
- cramp-style
- cram something down
- cram sth down
- cram-sth-down
- cranberry
- crane
- 窑户
- 窑洞
- 窑花子
- 窑调
- 窒
- 窒塞
- 窒息
- 窒滞
- 窒碍
- 窒郁
- 写给老师的一封信作文
- 家长写给老师的表扬信
- 写给老师的一封信作文
- 写给老师的一封信作文
- 写给老师的一封信作文
- 写给老师的一封信作文
- 写给老师的一封信作文
- 写给老师的一封信作文
- 写给老师的一封信作文300字
- 写给老师的一封信作文300字