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 {
        width: 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%;
        width: 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);

})