js上传图片

  #box{
      width: 300px;
      height: 300px;
      border: 2px solid #858585;
  }
  #imgshow{
      width: 100%;
      height: 100%;
  }
  #pox{
      width: 70px;
      height: 24px;
      overflow: hidden;
  }
<div>
    <div id="box">
      <img id="imgshow" src="" alt=""/>
  </div>
  <div id="pox">
      <input id="filed" type="file" accept="image/*"/>
  </div>
</div>
  //在input file内容改变的时候触发事件
  $('#filed').change(function(){
  //获取input file的files文件数组;
  //$('#filed')获取的是jQuery对象,.get(0)转为原生对象;
  //这边默认只能选一个,但是存放形式仍然是数组,所以取第一个元素使用[0];
      var file = $('#filed').get(0).files[0];
  //创建用来读取此文件的对象
      var reader = new FileReader();
  //使用该对象读取file文件
      reader.readAsDataURL(file);
  //读取文件成功后执行的方法函数
      reader.onload=function(e){
  //读取成功后返回的一个参数e,整个的一个进度事件
          console.log(e);
  //选择所要显示图片的img,要赋值给img的src就是e中target下result里面
  //的base64编码格式的地址
          $('#imgshow').get(0).src = e.target.result;
      }
  })

前提:引入jquery

posted on 2018-08-06 11:26  婆婆买了只kitty  阅读(106)  评论(0编辑  收藏  举报

导航