FileReader 方法 实现预览图片
2024-10-15 11:04:55
FileReader 方法
方法名 | 参数 | 描述 |
---|---|---|
abort | none | 中断读取 |
readAsBinaryString(readAsArrayBuffer) | file(blob) | 将文件读取为二进制码 |
readAsDataURL | file(blob) | 将文件读取为 DataURL |
readAsText | file, (blob) | 将文件读取为文本 |
FileReader 事件
事件 | 描述 |
---|---|
onabort | 中断时触发 |
onerror | 出错时触发 |
onload | 文件读取成功完成时触发 |
onloadend | 读取完成触发,无论成功或失败 |
onloadstart | 读取开始时触发 |
onprogress | 读取中 |
案例:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<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 img_result=document.getElementById("result");
img.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>
相关文章:MDN FileReader
最新文章
- Spark——共享变量
- MySQL中的全文索引
- zookeeper原理
- NOI上看到的几个小学奥数
- 【测试】并使用scott用户下的emp表写一条SQL语句,执行计划走唯一索引
- CMake实践(3)
- codeforces 434B B. Nanami&#39;s Digital Board(分治)
- 兔子--Fragment与ViewPager要切换滑动效果
- file 上传文件后缀名 限制
- 2016 Technology
- python - bilibili(二)出错的解决办法
- MyEclipse安装插件
- winfrom SVG转Imge
- Note of Jieba ( 词云图实例 )
- 你了解栈溢出StackOverFloweExeption的原理吗?
- lambada
- 使用Pyinstaller转换.py文件为.exe可执行程序
- 接触Struts2的ModelDriven<;>;接口
- ShiftRows方法简介
- 20175234 2018-2019-2 《Java程序设计》第四周学习总结