码迷,mamicode.com
首页 > 其他好文 > 详细

FileReader 方法 实现预览图片

时间:2018-10-04 09:17:23      阅读:129      评论:0      收藏:0      [点我收藏+]

标签:选择   ring   rip   value   fileread   ogr   abort   dstar   文件读取   

FileReader 方法

方法名参数描述
abort none 中断读取
readAsBinaryString 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 result=document.getElementById("result");
        result.innerHTML=<img src="+this.result+" />
    }
    
}
</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>

 

FileReader 方法 实现预览图片

标签:选择   ring   rip   value   fileread   ogr   abort   dstar   文件读取   

原文地址:https://www.cnblogs.com/xuey/p/9739490.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!