点击图片上传并且回显

最近要写一个点击图片上传加回显的操作，网上说的太乱，自己总结一下

1.样式 （默认的样式太丑了，如法忍受）

<style>
        .fileInputContainer{
                height:256px;
                position:relative;
                width: 256px;
            }
            .fileInput{
                height:256px;
                overflow: hidden;
                font-size: 300px;
                position:absolute;
                right:0;
                top:0;
                opacity: 0;
                filter:alpha(opacity=0);
                cursor:pointer;
            }
      </style>

2.html代码

      <div >
            <img id="upimg" class="fileInputContainer" style="width: 200px;height: 200px;border: 1px solid red;" src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1588996694&di=b843b174c363e3cb8456b3141da33d22&src=http://e.hiphotos.baidu.com/zhidao/pic/item/d62a6059252dd42a1c362a29033b5bb5c9eab870.jpg">
            <input class="fileInput" id='myFile' multiple="multiple" type="file">
        </img>
      </div>

3.js

<script>
           //图片回显
        document.querySelector('#myFile').onchange = function () {
              var read = new FileReader()
              read.readAsDataURL(this.files[0])
              read.onload = function () {
                  url = read.result
                  document.querySelector('#upimg').src = url
              }
        }
      </script>