效果如下
html:
<div> <div id = "showotherImage"> </div> <span id = "OpenIdCardImg"> <pan> </span> <input type = "file" id = "outro_inputfile" name = "reasoMg"/> </span> </div>
.basicinfo .item {preenchimento: .5rem .5rem 0; Border-top: .3rem sólido #eeeeee;}. BasicInfo li {Overflow: Hidden; Margin-Bottom: .5REM; altura da linha: 2.1Rem; Bottom: 1px Solid #E3E3E3;}. altura da linha: 2rem;}. BasicInfo textarea {altura: 8rem; altura de linha: 1.5rem;}. BasicInfo .Otherpic {min-height: 3Rem;}. altura da linha: 3REM; tamanho de fonte: 3REM; Margin-fundo: .5REM;}. Largura: 3REM; Altura: 3REM; Alinhamento vertical: topo; Border: 1px Solid #DDD;}. BasicInfo .yy_inputFile {Position: Absolute; topo: 0; Esquerda: 0; Largura: 3REM; Altura: 3REM; Opacity: 0;}. BasicInfo .aboutpic {margem-bottom: .5remm; altura da linha: 1.5REM; }JS:
var iMg_arr = new Array (); // 相关图片 $ (página) .on ('alteração', '#outros_inputfile', function () {$ (this) .ResizeImage ({that: this, cutwid: '', qualidade: 0.6, limitewid: 710, sucess: function (dados) {var len = $ ('#showotherimage'). Find (find ('). IMG = '<Div Style = "Float: Left;">' + '<img src = "' + img_arr [len] + '">' + '<span sid = "' + len + '" id = "outros_img _' + len + '"> </span> 9) {$ ('#OpenIdCardImg'). Hide (); // 删除相关图片 $ (página) .on ('clique', '. DeLetedImages', function () {var sid = $ (this) .attr ('sid'); img_arr.splice (sid, 1); $ (this) .parent (). Remover (); img = '<div style = "float: esquerda;">' + '<img src = "' + img_arr [i] + '">' + '<span sid = "' + i + '" id = "outros_img_' + i + '"> </span>' + '</div>'; $ ('#OpenIdCardImg'). Show (); { * faça algo ... *} *}) * * */ $ .fn.resizeImage = function (obj) {var file = obj.athat.files [0]; var url = window.url || window.webkiturl; var blob = url.createObjecturl (arquivo); var base64; var iMg = new Image (); img.src = blob; if (!/imagem /// w+/. test (obj.that.files [0] .Type)) {$ .toast ("请上传图片！", 1000); retornar falso; } img.onload = function () {if (img.width <obj.limitwid) {$ .toast ('图片宽度不得小于' + obj.limitwid + 'px', 1000); retornar falso; } var que = this; // 生成比例 var w, escala, h = that.Height; if (obj.cutwid == '') {w = that.width; } else {w = obj.cutwid; } escala = w / h; h = w / escala; // 生成 Canvas var Canvas = document.CreateElement ('Canvas'); var ctx = Canvas.getContext ('2D'); $ (tela) .attr ({width: w, altura: h}); ctx.drawimage (que, 0, 0, w, h); // 生成 base64 base64 = canvas.todataurl ('imagem/jpeg', obj.quality || 0,8); var resultado = {base64: base64}; // 成功后的回调 obj.success (resultado); }; };以上就是本文的全部内容 ， 希望对大家的学习有所帮助 ， 也希望大家多多支持武林网。