图片上传，选中显示图片

大致效果如下：

结构：

<button id="btn">+上传文件</button>
<input type="file" id="fileinput" accept=".jpg,.png,.gif,.jpeg">
<img  alt="" id="img"/><br/>
<span id="span"></span>

这里没有使用默认的input上传，把它display：none了，目的是不使用它的默认显示文件名的样式。

    let input = document.getElementById("fileinput");
    let img = document.getElementById("img");
    let btn = document.getElementById("btn");
    let span = document.getElementById("span");

    btn.onclick = () => {
      input.click()
    }

    input.addEventListener("change", (e) => {
      console.log(e,"此处的e是Event构造函数实例对象，target属性是元素类型");
      let reader = new FileReader();
      if(!/image/.test(e.target.files[0].type)){
        return alert('不是图片类型');
      }
      reader.readAsDataURL(e.target.files[0]);
      reader.onload = (event) =>{
        console.log(event,"此处的event是Event的实例ProgressEvent的实例，target是FileReader实例，可获取result属性");
        img.src = reader.result
        span.innerHTML = e.target.files[0].name
      }
    })

readAsDataURL()读取文件并将内容的数据 URI 保存在 result 属性中，也即base64，图片src就可以直接使用。

注意输出可以更好理解