本地文件预览

by 苹果熊

HTML

<div id="box">
  <form action="">
    <input type="file" id="file" accept="image/*">
    <p id="imgbox"></p>
    <input type="reset">
  </form>
</div>

JavaScript

(() => {
	const $file = document.querySelector('#file')
  const $imgBox = document.querySelector('#imgbox')
  let $fileData = new FileReader()
  let num = 0
  $file.onchange = function() {
  	$fileData.readAsDataURL(this.files[0])
  }
  $fileData.onload = function(o) {
    $imgBox.innerHTML = '<img src=' + o.target.result + '>'
  }
})()