FileReader 方法实现预览图片

最新推荐文章于 2022-07-18 17:22:16 发布

Anhk丶

最新推荐文章于 2022-07-18 17:22:16 发布

阅读量187

点赞数

文章标签： javascript js

原文链接：https://www.cnblogs.com/xuey/p/9739490.html

版权

FileReader 方法实现预览图片

FileReader 方法

方法名	参数描述
abort	none （中断读取）
readAsBinaryString（readAsArrayBuffer）	file（blob）（将文件读取为二进制码）
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>

原文链接：https://www.cnblogs.com/xuey/p/9739490.html

Anhk丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
FileReader 方法实现预览图片

FileReader 方法实现预览图片FileReader 方法方法名参数描述abortnone （中断读取）readAsBinaryString（readAsArrayBuffer）file（blob）（将文件读取为二进制码）abortnone （中断读取）readAsBinaryString（readAsArrayBuffer）file...
复制链接

扫一扫