fileReader对象的事件先后顺序

最新推荐文章于 2024-11-25 14:41:26 发布

原创最新推荐文章于 2024-11-25 14:41:26 发布 · 3.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html

HTML5 专栏收录该内容

5 篇文章

订阅专栏

本文详细探讨了HTML中的fileReader对象在处理文件时的事件触发顺序，包括读取开始、进度更新、成功完成及错误处理等关键步骤，帮助开发者更好地理解和使用fileReader接口。

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>fileReader对象的事件先后顺序</title>
</head>
<script language=javascript>
var result=document.getElementById("result");
var input=document.getElementById("input");
if(typeof FileReader=='undefined')
{
    result.innerHTML = "<p class='warn'>抱歉，你的浏览器不支持 FileReader</p>";
    input.setAttribute( 'disabled','disabled' );
} 
function readFile()
{
    var file = document.getElementById("file").files[0];
    var reader = new FileReader();
    reader.onload = function(e)
    {
        result.innerHTML = '<img src="'+this.result+'" alt=""/>'
        alert("load");
    }
    reader.onprogress = function(e)
    {
        alert("progress");
    }
    reader.onabort = function(e)
    {
        alert("abort");
    }
    reader.onerror = function(e)
    {
        alert("error");
    }
    reader.onloadstart = function(e)
    {
        alert("loadstart");
    }
    reader.onloadend = function(e)
    {
        alert("loadend");
    }
    reader.readAsDataURL(file);
}
</script> 
<p>
<label>请选择一个图像文件：</label>
<input type="file" id="file" />
<input type="button" value="显示图像" onclick="readFile()" />
</p> 
<div name="result" id="result">
<!-- 这里用来显示读取结果 -->
</div>

我的个人网站：http://mcbeath.cn