效果如下：

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); }; };

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。