前端上传图片，回显图片

想要实现的效果:
在一个系统中我上传了一张图片 然后点击完选择文件之后，这个时候还没有点击上传，可是，页面就已经把这个图片显示了

注意：图片显示的时候是没有提交或者走url的，只有点击submit按钮之后才进行后台交互

解决：几行js代码的事

前台html代码：

<div class="col-md-3 row align-items-center">
   <img th:src="${drinks.getDrinkPicture()}" id="xin"/>
   <input class="" name="dizhi" type="file" id="sun" />
</div>

js代码：

<script>
	// 选择文件上传控件
	var file = document.querySelector('#sun');
	// 选择图片控件
	var preview = document.querySelector('#xin');
	// 当用户选择完文件以后
	file.onchange = function(){
		// 创建文件读取对象
		var reader = new FileReader();
		// 在文件上传控件中有一个 files 属性，代表用户选择的文件列表，files[0] 表示第一个文件
		// 如果加了 multiple 属性上传多个文件的话，files[1] 就是第二个文件，files[2] 就是第三个文件 ...
		// 读取文件
		reader.readAsDataURL(this.files[0]);
		// 监听onload事件
		reader.onload = function(){
			// 将文件读取的结果显示在页面中
			preview.src=reader.result;
		}
	}
</script>

参考：https://blog.youkuaiyun.com/weixin_44679078/article/details/105537708