Blob对象和FileReader接口

最新推荐文章于 2024-07-04 05:00:00 发布

会飞的蜗牛haha

最新推荐文章于 2024-07-04 05:00:00 发布

阅读量3.4k

点赞数

分类专栏： HTML 文章标签：对象接口

本文链接：https://blog.csdn.net/ziy10231207/article/details/51890125

版权

HTML 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

</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/"开头的，利用这个特性可以判断用户选择的文件是否是图像类型的

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对象的事件先后顺序：

会飞的蜗牛haha

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Blob对象和FileReader接口

Blob对象：它表示二进制原始数据，提供一个slice方法，可以通过该方法访问到字节内部的原始数据快，file对象也继承了这个Blob对象它有两个属性1.size属性：表示一个Blob对象的长度 2.type属性：表示Blob的MIME类型，如果是未知类型，则返回一个空字符串Blob对象使用示例 Blob对象使用示例 function showFileType
复制链接

扫一扫

专栏目录