zoukankan      html  css  js  c++  java
  • 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             

    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);
    
    })
  • 相关阅读:
    工作所得所思之一
    angular路由
    html中offsetTop、clientTop、scrollTop、offsetTop各属性介绍
    您无权输入许可证密钥,请请使用系统管理员账户重试
    nginx的配置说明
    flexbox弹性盒子模型
    移动web开发规范
    为什么要使用响应式开发
    移动web开发
    如何给图片做缓存
  • 原文地址:https://www.cnblogs.com/susutong/p/10001261.html
Copyright © 2011-2022 走看看