js在上传图像之前进行预览

2021-07-21

上传图像选择input的file类型，根据图像信息，解析出预览image标签的src值。

<div>
	<img id="show" src="#" />
	<input accept="image/*" type='file' id="demo" />
</div>

<script type="text/javascript">
	
	let demo = document.getElementById("demo");
	let show = document.getElementById("show");

	demo.onchange = evt => {
		const [file] = demo.files; // 示例中默认上传一张图像
		console.log(demo.files);
		if (!file) return;
		show.src = URL.createObjectURL(file);
	}
</script>

URL.createObjectURL生成的值类似：blob:null/e060f0f4-cd80-4994-86c9-5ff409aa4bbb。

另外，也可以用读取文件数据的方式，src用base64格式来表示，稍微繁琐些。

替换上方代码onchange中内容：

const [file] = demo.files;
console.log(demo.files);
if (!file) return;

let reader = new FileReader();
reader.readAsDataURL(file); // 读取文件

// 渲染文件
reader.onload = function(arg) {
	show.src = arg.target.result;
}

这时的src格式类似：data:image/png:base64.xxxx。

（版权归cpury.com所有，转载请注明出处。）

WEB开发