效果如下 ：
HTML:
<div> <diviD = "showotherImage"> </div> <span id = "openIdCardImg"> <span> </span> <input type = "Datei" id = "other_inputFile" name = "alrodimg"/> </span> </div>
.basicinfo .Item {padding: .5rem .5rem 0; Border-Top: .3rem Solid #eeeeee;}. BasicInfo li {Überlauf: versteckt; Randboden: .5rem; Linienhöhe: 2.1Rem; Border-Bottom: 1PX Solid #e3e3e3;}. BasicInfo li: last-Kind {Border-Bottom: None;}. Basicinfo Eingabe [type = "text"] {Höhe: 2Rem; Zeilenhöhe: 2Rem;}. Basicinfo textarea {Höhe: 8REM; Zeilenhöhe: 1.5Rem;}. BasicInfo .Otherpic {min-Height: 3Rem;}. BasicInfo .Otherpic .addpic {Höhe: 3Rem; Linienhöhe: 3REM; Schriftgröße: 3Rem; Rand-Bottom: .5rem;}. BasicInfo .Otherpic img {Margin: 0 .5rem .5rem 0; Breite: 3Rem; Höhe: 3Rem; vertikaler Align: Top; Grenze: 1PX Solid #ddd;}. BasicInfo .yy_inputFile {Position: absolut; Top: 0; links: 0; Breite: 3Rem; Höhe: 3Rem; Opazität: 0;}. BasicInfo .Aboutpic {Rand-Bottom: .5rem; Zeilenhöhe: 1,5Rem; }JS:
var img_arr = new Array (); // 相关图片 $ (Seite) .on ('Change', '#other_inputFile', function () {$ (this) .ResizeImage ({this: this, cutwid: '', Qualität: 0.6, limitwid: 710, Erfolg: function (data) {var len = $ ('#showoTherage'. img = '<div style = "float: links;">' + '<img src = "' + img_arr [len] + '">' + '<span Sid = "' + len + '" id = "other_img _' + len + '"> </span>' + ' 9) {$ ('#openIdCardimg'). // 删除相关图片 $ (Seite) .on ('klick', '. DeletEdimages', function () {var sid = $ (this) .attr ('SID'); img_arr.spleplice (Sid, 1); {var img = '<div style = "float: links;">' + '<img src = "' + img_arr [i] + '">' + '<span Sid = "' + i + '" id = "other_img_' + i + '"> </span>' + ' 9) {$ ('#openIdCardimg'). Show (); (Daten) { * etwas tun ... *} *}) * * */ $ .fn.ResizeImage = Funktion (obj) {var file = obj.that.files [0]; var url = window.url || Fenster.Webkiturl; var blob = url.createObjecturl (Datei); var base64; var img = new Image (); img.src = blob; if (!/image /// w+/. test (obj.that.files [0] .type)) {$ .toast ("请上传图片！", 1000); false zurückgeben; } img.onload = function () {if (img.width <obj.limitwid) {$ .toast ('图片宽度不得小于' + obj.limitwid + 'px', 1000); false zurückgeben; } var that = this; // 生成比例 var w, scale, h = this.height; if (obj.cutwid == '') {w = this.width; } else {w = obj.cutwid; } scale = w / h; H = W / Skala; // 生成 Canvas var canvas = document.createelement ('canvas'); var ctx = canvas.getContext ('2d'); $ (Canvas) .Attr ({Breite: W, Höhe: H}); ctx.drawimage (das, 0, 0, w, h); // 生成 Base64 Base64 = canvas.todataurl ('Image/jpeg', obj.Quality || 0,8); var result = {Base64: Base64}; // 成功后的回调 obj.success (Ergebnis); }; };以上就是本文的全部内容 ， 希望对大家的学习有所帮助 ， 也希望大家多多支持武林网。 也希望大家多多支持武林网。