使用readAsDataURL预览图片
使用readAsDataURL预览图片
Petterp
发布于 2022-02-09 02:53:16
发布于 2022-02-09 02:53:16
代码可运行
运行总次数：0
代码可运行
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用FileReader接口读取文件</title>
</head>
<body>
<script>
function read(){
if(typeof FileReader=='undifined') //判断浏览器是否支持filereader
{
result.innerHTML="<p>抱歉，你的浏览器不支持 FileReader</p>";
return false;
}
var file=document.getElementById("imagefile").files[0];
if(!/image\/\w+/.test(file.type)) //判断获取的是否为图片文件
{
alert("请确保文件为图像文件");
return false;
}
var reader=new FileReader();
reader.readAsDataURL(file);
reader.onload=function(e)
{
var result=document.getElementById("result");
result.innerHTML='<img src='+this.result+' alt=""/>'
}
}
</script>
<p>
<label>请选择一个文件：</label>
<input type="file" id="imagefile" />
<input type="button" value="读取图像" onClick="read();" />
</p>
<div id="result" name="result">
<!-- 这里用来显示图片结果-->
</div>
</body>
</html>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
