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

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

//图片上传
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);

})

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

相关推荐