效果如下 ：
HTML :
<div> <div id = "showotherimage"> </div> <span id = "OpenIdCardImg"> <span> </span> <입력 유형 = "file"id = "Other_InputFile"name = "rasonimg"/> </span> </div> </div>
.basicinfo .item {패딩 : .5rem .5rem 0; 테두리 탑 : .3rem solid #eeeeee;}. BasicInfo li {오버플로 : 숨겨진; 마진-바닥 : .5rem; 라인 높이 : 2.1REM; Border-Bottom : 1px solid #e3e3e3;}. BasicInfo li : last-Child {border-bottom : none;}. BasicInfo input [type = "text"] {height : 2rem; 선-높이 : 2rem;}. BasicInfo TextRea {높이 : 8rem; Line-Height : 1.5rem;}. BasicInfo. oterpic {min-height : 3rem;}. BasicInfo. oterpic .addpic {height : 3rem; 라인 높이 : 3REM; 글꼴 크기 : 3REM; 마진-바닥 : .5rem;}. BasicInfo. 다른 IMG {마진 : 0 .5rem .5rem 0; 너비 : 3REM; 높이 : 3REM; 수직 정상 : 상단; 국경 : 1px solid #ddd;}. BasicInfo .yy_inputfile {위치 : 절대; 상단 : 0; 왼쪽 : 0; 너비 : 3REM; 높이 : 3REM; 불투명도 : 0;}. BasicInfo .aboutPic {마진-바닥 : .5rem; 라인 높이 : 1.5rem; }JS :
var img_arr = new Array (); // 相关图片 $ (page) .on ( 'change', '#other_inputfile', function () {$ (this) .resizeImage ({the : that : that : this : that : this : this : that : that : that : that : that : that : that : that : that : that : that : that : that : that : that : that : that : cutwid : ', thistizeImage : 0.6, limitwid : 710, success : function (data) {var len = $ ('#showotherimage '); img _. img = <div style = "float : left;"> ' +'<img src = " ' + img_arr [len] +'"> ' +'<sid = " ' + len +'"id = "Other_img _ ' + len +'" "</span> ' +'</div> '; 9) {#OpenIdCardImg '. // 删除相关图片 $ (page) .on ( 'click', '. deletedimages', function () {var sid = $ (this) .attr ( 'sid'); img_arr.splice (sid, 1); $ (this). remove (); $ ( '#showotherimage'). html ( ''); i <img_arr.lenger; img = <div style = "float :"> ' +'<img src = " ' + img_arr [i] +'"> ' +'<span sid = "rever_img_ ' + i +'"> $ ( '#openIdcardimg'). show () else { '#OpenIdCardImg'); hide (}); { * 뭔가 ... *} *}) * * */ $ .fn.resizeImage = function (obj) {var file = obj.that.files [0]; var url = window.url || Window.WebKitUrl; var blob = url.createobjecturl (파일); var base64; var img = new Image (); img.src = blob; if (!/image /// w+/. test (obj.that.files [0] .type)) {$ .toast ( "请上传图片！", 1000); 거짓을 반환합니다. } img.onload = function () {if (img.width <obj.limitwid) {$ .toast ( '图片宽度不得小于' + 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 ({너비 : w, 높이 : h}); ctx.DrawImage (그, 0, 0, w, h); // base64 base64 = canvas.todataurl ( 'image/jpeg', obj.quality || 0.8); var result = {base64 : base64}; // 成功后的回调 obj.success (결과); }; };以上就是本文的全部内容 以上就是本文的全部内容, 希望对大家的学习有所帮助, 也希望大家多多支持武林网。