zoukankan      html  css  js  c++  java
  • jq 图片上传前预览

    html:

    <div class="form_upload">
        <input type="file" id="uploadImg" name="" accept="image/*">
        <label for="uploadImg" class="upload_btn">
            <i class="icon"></i>
            <img src="" alt="">
        </label>
    </div>

    css:

    input[type="file"]{ display: none;}
    .upload_btn{flex:0 0 auto;margin:0 0.266667rem 0.266667rem 0;display: -webkit-flex;display: flex;align-items: center;justify-content: center;width:1.6rem;height: 1.6rem;background: #F2F7FC;border:1px solid #eee;border-radius: 3px;}
    .upload_btn .icon{ width: 0.666667rem;height: 0.666667rem;background: url(/static/user/lottery/images/icon_upload@2x.png) no-repeat center;background-size: cover;display: block;}
    .upload_btn img{display: none;}
    .upload_btn.isUpload{background: #fff;}
    .upload_btn.isUpload .icon{display: none;}
    .upload_btn.isUpload img{display: block;}

    jq:

    <script src="/static/user/lottery/js/jquery-3.2.0.js"></script>
    <script>
      $(function(){
        // 上传
           $(document).on('click', '.upload_btn', function(event) {
             var id=event.currentTarget.htmlFor;
          onChange(id)
        });
      })
    
      // 上传图片预览        
      function onChange(id){
        $("#"+id).change(function(e) {
          var imgBox = e.target;
          uploadImg($(this), imgBox)
        });
      }
      function uploadImg(element, tag) {
        var preview = element.siblings('.upload_btn');
        var file = tag.files[0];
        var imgSrc;
        if(file){
          var reader = new FileReader();
          reader.readAsDataURL(file);
          reader.onload = function() {
            console.log(this.result);
            imgSrc = this.result;
            preview.addClass('isUpload');
            preview.find("img").attr("src", imgSrc);
          };                
        }
      }
    </script>
  • 相关阅读:
    浅析WPhone、Android的Back与Home键
    Android音频播放之SoundPool
    Button、ImageButton及ImageView详解
    文本 To 音频
    gravity、layout_gravity及orientation
    项目规范性检测工具Lint
    Android视频播放之VideoView
    ContentProvider数据访问详解
    QQ第三方登录
    Android数据共享
  • 原文地址:https://www.cnblogs.com/vicky123/p/10616069.html
Copyright © 2011-2022 走看看