使用readAsDataURL方法预览图片

来源：互联网发布：h5万能表单系统源码编辑：程序博客网时间：2024/05/21 14:00

使用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>

0 0