原生js實現圖片上傳預覽

<label for="file">上傳圖片</label>
<input id="file" type="file" name="file" onchange="changepic()"></input>
<img src="" id="show" width="200">
<script>
  function changepic() {
    const reads = new FileReader();
    const f = document.querySelector('#file').files[0];
    reads.readAsDataURL(f);
    reads.onload = function (e) {
        document.getElementById('show').src = this.result;
    };
  }
</script>

因爲表單元素的自帶的樣式不可更改，這裏用label標籤來自定義樣式，表現結果和input是一樣的。

reads..result就是圖片的base64形式。

上傳一個圖片後差不多就是下面這種效果