选择头像并预览

1.实现效果

2.代码

• HTML代码

          <div class="box">
            <img src="car.png" alt="" id="carImg">
            <div class="mask">
              <a href="javascript:;">上傳圖片</a>
              <input type="file" name="" id="file" onchange="selectPic(this)" accept="image/png, image/jpeg, image/jpg">
            </div>
          </div>

• JS代码

function selectPic() {
              var reads= new FileReader();
              f=document.getElementById('file').files[0];
              reads.readAsDataURL(f);
              reads.onload=function (e) {
                  document.getElementById('carImg').src=this.result;
              };
          }