HTML5里FileReader对象的相关属性,方法,事件及实例[原创]推荐 原创


  • :
  • 03-23 22:35
  • :
  • 17次
  • :
  • 0条
  • 2赞

简介本文讲的是FileReader对象的相关内容,通过本文的阅读,可以让你快速掌握HTML5里FileReader对象的使用。

本文站长和大家整理分享HTML5里FileReader对象的相关属性,方法及一些常用实例。

FileReader对象是HTML5可以让我们的WEB访问本地文件的一个组件,通常用在拖拽上传时显示图片预览,或显示读取本地文件内容,下面是具体的相内内容:

一:创建:

var reader = new FileReader();

二:相关属性:

FileReader.error :读取文件时的错误信息提示;
FileReader.readyState  : 表示读取文件时的状态信息,值如下:
    1 (empty) 未加载文件数据;
    2 (loading) 正在加载;
    3 (done) 加载完成;
FileReader.result :文件的内容(数据的格式取决于使用哪个方法来启动读取操作)。

三:相关方法:

FileReader.abort()  : 中止读取的操作。

FileReader.readAsArrayBuffer(file)  : 以ArrayBuffer的方式来读取文件内容,完成后,保存在result属性里。

FileReader.readAsBinaryString(file) :以BinaryString(二进制)的方式来读取,完成后,FileReader.result中是文件的原始二进制数据。

FileReader.readAsDataURL(file) : 读取完成后,FileReader.result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容,图片上传前的本地预览用的就是这个。

FileReader.readAsText(file,encoding)  :encoding表示编码,读取完成后,FileReader.result属性中将包含一个字符串以表示所读取的文件内容。

来看一个显示本地文件的实例:

function ShowFile(file){
    var reader = new FileReader();
  	reader.onload = function(e) {
      	$("#drop").text(reader.result);
    };
    reader.onerror=function(e,b,c){
    	//error
    };
    reader.readAsText(file);
}

上面实例里,通过上传或file控件获取到选取的file后,就可以用上面这个函数来直接显示文本内容,可以参考这篇《Html5里的file对象的相关属性,和获取file对象的两种方法

四:相关事件:

FileReader.onabort : 处理abort事件。该事件在读取操作被中断时触发。

FileReader.onerror : 处理error事件。该事件在读取操作发生错误时触发。

FileReader.onload  : 处理load事件。该事件在读取操作完成时触发。

FileReader.onloadstart : 处理loadstart事件。该事件在读取操作开始时触发。

FileReader.onloadend  : 处理loadend事件。该事件在读取操作结束时(要么成功,要么失败)触发。

FileReader.onprogress : 处理progress事件。在读取数据过程中周期性调用。

好了,关于FileReader对象的相关属性,方法,事件就介绍到这里了,其实我们在WEB里做和“拖拽”相关的项目时,都会用到FileReader对象,可参考本站的《拖拽》专题。



您正在找的文章可能是: