JavaScript通过filereader接口读取文件
程序员文章站
2022-06-05 13:34:41
使用filereader接口的readasdataurl方法实现图片的预览。
源代码：
&l...
使用filereader接口的readasdataurl方法实现图片的预览。
源代码：
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>通过filereader接口读取文件</title>
<script type="text/javascript">
function readasdataurl()
{
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>
</head>
<body>
<p>
<label>请选择一个文件：</label>
<input type="file" id="imagefile" />
<input type="button" value="读取图像" onclick="readasdataurl();" />
</p>
<div name="result" id="result">
<!-- 这里用来显示图片结果-->
</div>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： asp是的日期转换为星座的函数
下一篇： ASP 获取腾讯IP地址的代码