html
1 <div class="parent"> 2 <img src="" id="portrait" /> //显示用户所选到的图片,即预览 3 <div class="child"> //点击区域 4 <svg class="icon" aria-hidden="true"> 5 <use xlink:href="#icon-shangchuantupiananniu_moren"></use> 6 </svg> 7 <input type="file" id="file" accept="image/*" multiple="multiple"/><br /> //文件上传控件 8 </div> 9 </div> 10 <input type="hidden" value="" id="baseImg" /> //保存转成abse64的图片 11 <button class="submitImg mui-btn-blue" type="button">上传</button> //上传按钮
css
1 #portrait { 2 79px; //限制所选图片的大小 以防图片过大手机显示不下 3 height: auto; 4 } 5 .submitImg { 6 margin: 50px auto; 7 display: block; 8 } 9 10 .child { 11 position: relative; 12 display: inline-block; 13 } 14 15 #file { 16 position: absolute; 17 left: 0px; 18 top: 0px; 19 opacity: 0; 20 height: 100%; 21 100%; 22 } 23
js
//图片上传 mui('#wrap').on('change', '#file', function() { var obj = this.files[0]; var fr = new FileReader(); fr.onload = function() { mui("#portrait")[0].setAttribute('src', this.result); mui('#baseImg')[0].value = this.result; }; fr.readAsDataURL(obj); })