H5的FileReader分布读取文件怎么使用 - 行业资讯 - 肥雀云

　　介绍

这篇文章将为大家详细讲解有关H5的FileReader分布读取文件怎么使用,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

先介绍一下H5中FileReader的一些方法以及事件

FileReader方法

名称,,,作用

关于(),,终止读取

readAsBinaryString(文件),,将文件读取为二进制编码

readAsDataURL(文件),,将文件读取为DataURL编码

readAsText(文件,(编码)),,将文件读取为文本

readAsArrayBuffer(文件),,将文件读取为arraybuffer

FileReader事件

名称

作用

onloadstart,,读取开始时触发

onprogress,,读取中

onloadend,,读取完成触发,无论成功或失败

onload,,文件读取成功完成时触发

onabort,,中断时触发

onerror,,出错时触发

代码

分布读取文件核心思想,将文件分块以每米进行读取。

HTML部分

& lt; !DOCTYPE html> 　　& lt; html lang=癳n"祝辞　　　　& lt; head> 　　& lt;元charset=癠TF-8"祝辞　　& lt; title> Document 　　& lt;/head> 　　　　& lt; body> 　　& lt; form> 　　& lt; fieldset> 　　& lt; legend>分步读取文件:& lt;/legend> 　　& lt;输入类型=癴ile"id=癋ile"比; 　　& lt;输入类型=癰utton"值=https://www.yisu.com/zixun/敝卸? id=爸兄埂? 　　

　　<标签>读取进度: 　　<进程id="进步" value=" 0 " max=" 100 "> 　　

　　　　<脚本> 　　　　var进步=. getelementbyid(“进步”);//进度条={var事件　　负载:函数(){ 　　console.log(“加载”); 　　}, 　　进展:函数(百分比){ 　　console.log(百分比); 　　的进步。值=%; 　　}, 　　成功:函数(){ 　　console.log('成功'); 　　} 　　}；　　var装载机;//选择好要上传的文件后触发onchange事件　　. getelementbyid(“文件”)。onchange=function (e) { 　　var文件=this.files [0]; 　　console.log(文件)//loadFile.js 　　装载机=new FileLoader(文件、事件); 　　}；　　　　. getelementbyid(“中止”)。onclick=function () { 　　loader.abort (); 　　}> 　　

loadFile。js部分

/* 　　*文件读取模块　　*文件文件对象　　*事件事件回掉对象包含成功,负载,进步　　*/var FileLoader=function(文件,事件){ 　　这一点。读者=new FileReader (); 　　这一点。文件=文件; 　　这一点。加载=0; 　　这一点。总=file.size;//每次读取1米　　这一点。一步=1024 * 1024; 　　这一点。事件=事件| | {};//读取第一块　　this.readBlob (0); 　　this.bindEvent (); 　　} 　　　　FileLoader。原型={ 　　bindEvent:函数(事件){ 　　var _this=, 　　读者=this.reader; 　　　　读者。onload=function (e) { 　　_this.onLoad (); 　　}；　　　　读者。onprogress=function (e) { 　　_this.onProgress (e.loaded); 　　}；//启动、终止错误回调暂时不加　　},//进步事件回掉>关于H5的FileReader分布读取文件怎么使用就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。