</pre>Blob对象:</h2><p>它表示二进制原始数据,提供一个slice方法,可以通过该方法访问到字节内部的原始数据快,file对象也继承了这个Blob对象</p><p>它有两个属性1.size属性:表示一个Blob对象的长度 2.type属性:表示Blob的MIME类型,如果是未知类型,则返回一个空字符串</p><h5>Blob对象使用示例</h5><p></p><pre name="code" class="html"><!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Blob对象使用示例</title>
</head>
<script type="text/javascript">
function showFileType()
{
var file;
//得到用户选择的第一个文件
file=document.getElementById("file").file[0];
var size=document.getElementById("size");
//显示文件字节长度
size.innerHTML=file.size;
var type=document.getElementById("type");
//显示文件类型
type.innerHTML=file.type;
}
</script>
选择文件
<input type="file" id="file">
<input type="button" value="显示文件信息" οnclick="showFileType();"/><br/>
文件字节长度:<span id="size"></span><br/>
文件类型:<span id="type"></span>
对于图像类型的文件,Blob对象的type属性都是以"Image/"开头的,利用这个特性可以判断用户选择的文件是否是图像类型的
</pre>Blob对象:</h2><p>它表示二进制原始数据,提供一个slice方法,可以通过该方法访问到字节内部的原始数据快,file对象也继承了这个Blob对象</p><p>它有两个属性1.size属性:表示一个Blob对象的长度 2.type属性:表示Blob的MIME类型,如果是未知类型,则返回一个空字符串</p><h5>Blob对象使用示例</h5><p></p><pre name="code" class="html"><!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Blob对象使用示例</title>
</head>
<script type="text/javascript">
function showFileType()
{
var file;
//得到用户选择的第一个文件
file=document.getElementById("file").file[0];
var size=document.getElementById("size");
//显示文件字节长度
size.innerHTML=file.size;
var type=document.getElementById("type");
//显示文件类型
type.innerHTML=file.type;
}
</script>
选择文件
<input type="file" id="file">
<input type="button" value="显示文件信息" οnclick="showFileType();"/><br/>
文件字节长度:<span id="size"></span><br/>
文件类型:<span id="type"></span>
FileReader接口:
主要用来把文件读入内存,并且读取文件中的数据,它提供了一个异步API,使用这个异步API可以在浏览器主线程中异步访问文件系统,读取文件中的数据
1.接口的方法:
它有四个接口的方法,其中三个用来读取文件,另一个用来读取过程中断,无论读取成功或者失败,方法不会返回读取结果,这个结果储存在result属性中
a.readAsText:该方法有两个参数,第二个参数是文本的编码方式,默认值为UTF-8,即将文件以文本方式读取,读取的结果即是这个文本文件中的内容
b.readAsDataString:这个方法将文件读取为二进制字符串,通常将它传送到后端,后端可以通过这段字符串存储文件
c.readAsDataURL:该方法将文件读取为一串Data URL字符串,事实上是将小文件以一种特殊格式的URL地址形式直接读入页面,这里的小文件通常指的是图像和html等格式的文件。
2.接口的事件:
onabort 数据读取中断时触发
onerror 数据读取出错时触发
onloadstart 数据读取开始时触发
onprogress 数据读取中
onload 数据读取成功完成时触发
onloadend 数据读取完成时触发,无论成功或者失败
3.fileReader方法示例
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>fileReader方法示例</title>
</head>
<script type="text/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.οnlοad=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.οnlοad=function(f)
{
var result=document.getElementById("result");
result.innerHTML=this.result;
}
}
//将文本以文件的形式读入页面
function readAsText()
{
var file=document.getElementById("file").file[0];
var reader=new FileReader();
//将文件以文本形式读入页面
read.readAsText(file);
reader.οnlοad=function(f)
{
var result=document.getElementById("result");
//在页面上显示读入文本
result.innerHTML=this.result;
}
}
</script>
<p>
<label>请选择一个文件:</label>
<input type="file" id="file">
<input type="button" value="读取图像" οnclick="readAsDataURL()"/>
<input type="button" value="读取二进制数据" οnclick="readAsBinaryString()"/>
<input type="button" value="读取文本文件" οnclick="readAsText()"/>
</p>
<div name="result" id="result">
<!-- 这里是用来显示读取结果-->
</div>
请注意:代码fileReader对象读取到的数据都保存在了result属性中
fileReader对象的事件先后顺序: