<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Blob Test</title>
<script>
function handleFile(e) {
// 取得文件并生成blob流
var file = e.files[0];
var blob = URL.createObjectURL(file);
// 显示到图片
var img = document.getElementsByTagName("img")[0];
img.src = blob;
// 加载完毕,将blob流释放
img.onload = function(e) {
URL.revokeObjectURL(this.src); // 释放createObjectURL创建的对象##
}
}
</script>
</head>
<body>
<!-- 设置类型为文件、接收图片、绑定change事件回调 -->
<input type="file" accept="image/*" onchange="handleFile(this)" />
<br/>
<!-- 显示图片的位置 -->
<img style="width:200px;height:200px">
</body>
</html>
利用blob对象预览将上传的图片
最新推荐文章于 2024-02-20 20:01:37 发布