blob对象之上传图片本地预览

发表于 |

看到网上有人说blob上传图片到服务器，相对Base64来说是个更好的选择，于是自己尝试了下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<input id="choose" type="file" value="选择">
	<img id="img" src="" alt="" height="100px">
	<script>
		var choose = document.getElementById("choose");
		var img = document.getElementById("img");
		choose.onchange = function (e){
			var f = e.target.files[0];
			var src = window.URL.createObjectURL(f);
			img.src = src;
		}
	</script>
</body>
</html>

以上即可实现了选择图片本地预览。