HTML5 文件API
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>fileReader方法示例</title>
</head>
<script language=javascript>
var result=document.getElementById("result");
var file=document.getElementById("file");
if (typeof FileReader == 'undefined' )
{
result.innerHTML = "<p>抱歉，你的浏览器不支持 FileReader</p>";
file.setAttribute( 'disabled','disabled' );
}
//将文件以Data URL形式进行读入页面
function readAsDataURL()
{
//检查是否为图像文件
var file = document.getElementById("file").files[0];
if(!/image\/\w+/.test(file.type))
{
alert("请确保文件为图像类型");
return false;
}
var reader = new FileReader();
//将文件以Data URL形式进行读入页面
reader.readAsDataURL(file);
reader.onload = function(e)
{
var result=document.getElementById("result");
//在页面上显示文件
result.innerHTML = '<img src=" ' +this.result+ ' " alt=""/>'
}
}
//将文件以二进制形式进行读入页面
function readAsBinaryString()
{
var file = document.getElementById("file").files[0];
var reader = new FileReader();
//将文件以二进制形式进行读入页面
reader.readAsBinaryString(file);
reader.onload = function(f)
{
var result=document.getElementById("result");
//在页面上显示二进制数据
result.innerHTML=this.result;
}
}
//将文件以文本形式进行读入页面
function readAsText()
{
var file = document.getElementById("file").files[0];
var reader = new FileReader();
//将文件以文本形式进行读入页面
reader.readAsText(file);
reader.onload = function(f)
{
var result=document.getElementById("result");
//在页面上显示读入文本
result.innerHTML=this.result;
}
}
</script>
<p>
<label>请选择一个文件：</label>
<input type="file" id="file" />
<input type="button" value="读取图像" onclick="readAsDataURL()"/>
<input type="button" value="读取二进制数据" onclick="readAsBinaryString()"/>
<input type="button" value="读取文本文件" onclick="readAsText()"/>
</p>
<div name="result" id="result">
<!-- 这里用来显示读取结果 -->
</div>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
fileReader对象的事件先后顺序
</title>
<script language="javascript" type="text/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>
</head>
<body>
<p>
<label>请选择一个图像文件：</label> <input type="file" id="file"> <input type="button" value="显示图像" onclick="readFile()">
</p>
<div name="result" id="result">
<!-- 这里用来显示读取结果 -->
</div>
</body>
</html>
