js实现头像上传（移动端，PC端均可）

html

　　　　<div class="parent">
            <img src="" id="portrait" /> //显示用户所选到的图片，即预览
            <div class="child">  //点击区域     
                 <svg class="icon" aria-hidden="true">
                     <use xlink:href="#icon-shangchuantupiananniu_moren"></use>
                  </svg>
                   <input type="file" id="file" accept="image/*"  multiple="multiple"/><br />  //文件上传控件
             </div>
       </div>
       <input type="hidden" value="" id="baseImg" />  //保存转成abse64的图片
       <button class="submitImg mui-btn-blue" type="button">上传</button>  //上传按钮

css

#portrait {
         79px;  //限制所选图片的大小 以防图片过大手机显示不下
        height: auto;
}
.submitImg {
        margin: 50px auto;
        display: block;
}
            
.child {
        position: relative;
        display: inline-block;
}
            
#file {
        position: absolute;
        left: 0px;
        top: 0px;
        opacity: 0;
        height: 100%;
         100%;
}
            

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);

})