js 上传图片并预览

先准备必要的 dom 元素

html：

<div id="box">
  <div id="img-box">
    <input type="file" id="img-file" onchange="uploadImg(this)">
  </div>
</div>

接下来是通过 js 实现上传

js：

// 封装一个获取dom的函数
function $(id) {
	return document.getElementById(id)
}
// 上传图片
function uploadImg(_this) {
	let fileData = _this.files[0]
	let reader = new FileReader()
	reader.readAsDataURL(fileData)
	reader.onload = function (result) {
		$('img-box').style.backgroundImage = `url(${this.result})`
	}
}

上传前效果图：

上传后效果图