效果如下：
html:
<div> <div id = "showotherimage"> </div> <span id = "openIdCardimg"> <span> </span> <อินพุต type = "ไฟล์" id = "อื่น ๆ
.BasicInfo .ITEM {PADDING: .5REM .5REM 0; ชายแดนด้านบน: .3REM SOLID #EEEEEE;}. BASSICINFO LI {Overflow: HIDDEN; มาร์จิ้น-ก้น: .5REM; ความสูงบรรทัด: 2.1REM; ขอบด้านล่าง: 1px Solid #E3E3E3;}. BasicInfo li: Last-Child {Border-Bottom: None;}. input BasicInfo [type = "text"] {ความสูง: 2Rem; Line-Height: 2Rem;}. BasicInfo Textarea {ความสูง: 8REM; Line-Height: 1.5Rem;}. BasicInfo .OTHERPIC {Min-Height: 3REM;}. BasicInfo .Otherpic .Addpic {ความสูง: 3REM; ความสูงของสาย: 3REM; ขนาดตัวอักษร: 3REM; ขอบด้านล่าง: .5REM;}. BASICINFO .OTHERPIC IMG {มาร์จิ้น: 0 .5REM .5REM 0; ความกว้าง: 3rem; ความสูง: 3rem; แนวตั้ง-แนว: ด้านบน; เส้นขอบ: 1px Solid #DDD;}. BasicInfo .YY_INPUTFILE {ตำแหน่ง: สัมบูรณ์; ด้านบน: 0; ซ้าย: 0; ความกว้าง: 3rem; ความสูง: 3rem; ความทึบ: 0;}. BasicInfo .Aboutpic {margin-bottom: .5Rem; ความสูงของสาย: 1.5Rem; -JS:
var img_arr = new Array (); // 相关图片 $ (หน้า) .on ('เปลี่ยน', '#etter_inputfile', function () {$ (นี่) .resizeimage ({นั่น: สิ่งนี้, cutwid: '', คุณภาพ: 0.6, limitwid: 710, ความสำเร็จ: ฟังก์ชั่น (data) {var len = $ ('#showotherimage') img = '<div style = "float: left;">' + '<img src = "' + img_arr [len] + '">' + '<sid sid = "' + len + '" id = "other_img _' + len + '" 9) {$ ('#openidcardimg'). ซ่อน (); // 删除相关图片 $ (หน้า) .on ('คลิก', '. deletEdImages', function () {var sid = $ (นี่) .attr ('sid'); img_arr.splice (sid, 1); $ (นี่) .parent () img = '<div style = "float: left;">' + '<img src = "' + img_arr [i] + '">' + '<span sid = " + i +'" id = "other_img_ ' + i +'" $ ('#OpenIdCardimg'). show (); { * ทำอะไรบางอย่าง ... *} *}) * * * */ $ .fn.resizeImage = ฟังก์ชั่น (obj) {var file = obj.that.files [0]; var url = window.url || window.webkiturl; var blob = url.createObjecturl (ไฟล์); var base64; var img = ภาพใหม่ (); img.src = blob; if (!/image /// w+/. ทดสอบ (obj.that.files [0] .type)) {$ .oast ("请上传图片！", 1000); กลับเท็จ; } img.onload = function () {ถ้า (img.width <obj.limitwid) {$ .oast ('图片宽度不得小于' + obj.limitwid + 'px', 1000); กลับเท็จ; } 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, ความสูง: h}); ctx.drawimage (นั่น, 0, 0, w, h); // 生成 base64 base64 = canvas.todataurl ('image/jpeg', obj.quality || 0.8); var result = {base64: base64}; // 成功后的回调 obj.success (ผลลัพธ์); - -以上就是本文的全部内容， 希望对大家的学习有所帮助， 也希望大家多多支持武林网。