效果如下 ：
HTML:
<div> <div id = "showothereMage"> </div> <span id = "openIdCardimg"> <span> </span> <input type = "file" id = "other_inputfile" name = "razoniMg"/> </span> </div>
.Basicinfo .Item {Padding: .5rem .5rem 0; border-top: .3rem solid #eeeeee;}. BasicInfo li {Overflow: Hidden; margen-bottom: .5rem; línea de línea: 2.1rem; Border-Bottom: 1px Solid #E3E3E3;}. BasicInfo Li: Last-Child {Border-Bottom: Ninguno;}. BasicInfo Input [type = "Text"] {Height: 2Rem; Línea-aguja: 2rem;}. BasicInfo TextARea {altura: 8rem; Línea-aguja: 1.5rem;}. BasicInfo .Tospic {min-height: 3rem;}. BasicInfo .Therpic .addpic {altura: 3Rem; Línea de altura: 3rem; tamaño de fuente: 3rem; margen-bottom: .5rem;}. BasicInfo .Tospic img {margen: 0 .5rem .5rem 0; Ancho: 3rem; Altura: 3rem; Align vertical: arriba; border: 1px solid #ddd;}. BasicInfo .yy_inputfile {posición: absoluto; arriba: 0; Izquierda: 0; Ancho: 3rem; Altura: 3rem; Opacidad: 0;}. BasicInfo .Aboutpic {margen-bottom: .5rem; Línea de altura: 1.5rem; }JS:
var img_arr = new Array (); // 相关图片 $ (página) .on ('Change', '#Other_inputFile', function () {$ (this) .ResizeImage ({that: this, thutwid: '', Quality: 0.6, LimitWid: 710, Succes: Function (data) {var dent = $ ('#showotheriMage'). Find ('img'). Size (); img_arr img = '<div style = "Float: Left;">' + '<img src = "' + img_arr [len] + '">' + '<span sid = "' + len + '" id = "other_img _' + dent 9) {$ ('#OpenIdCardimg'). Hide (); // 删除相关图片 $ (Page) .on ('Click', '. img = '<div style = "Float: Left;">' + '<img src = "' + img_arr [i] + '">' + '<span sid = "' + i + '" id = "other_img_' + i + '"> </span>' + '</div>'; $ ('#OpenIdCardimg'). Show (); { * do algo ... *} *}) * * */ $ .fn.resizeImage = function (obj) {var file = obj.that.files [0]; var url = window.url || Window.webkiturl; var blob = url.createObjectUrl (archivo); var base64; var img = nueva imagen (); img.src = blob; if (!/image /// w+/. test (obj.that.files [0] .type)) {$ .toast ("请上传图片！", 1000); devolver falso; } img.onload = function () {if (img.width <obj.limitwid) {$ .toast ('图片宽度不得小于' + obj.limitwid + 'px', 1000); devolver falso; } var that = this; // 生成比例 var w, escala, h = que.Height; if (obj.cutwid == '') {w = that.width; } else {w = obj.cutwid; } escala = w / h; h = w / escala; // 生成 Canvas var lienvas = document.createElement ('Canvas'); var ctx = canvas.getContext ('2d'); $ (Canvas) .attr ({ancho: w, altura: h}); ctx.drawimage (que, 0, 0, w, h); // 生成 Base64 Base64 = Canvas.todataurl ('Image/jpeg', obj.Quality || 0.8); resultado var = {base64: base64}; // 成功后的回调 obj.success (resultado); }; };以上就是本文的全部内容 ， 希望对大家的学习有所帮助 也希望大家多多支持武林网。 也希望大家多多支持武林网。