file是什么文件格式（file格式转换方式）

• readasarraybuffer(file)：读取file文件的内容，并作为arraybuffer格式得到结果。


• readastext(file,charset)：按照指定的charset字符集以文本文件的形式读取file文件的内容。


• readasbinarystring(file)：以二进制字符串的形式读取文件。


• readasdataurl(file)：读取file文件并返回file文件的base64地址。

• result，在文件读取结束时返回指定方式读取文件的结果。

• loadstart：开始读取文件时触发该事件。


• progress：读取文件过程中触发该事件。


• load：当文件读取结束时触发该事件。

例1：读取文件（图片）并得到该文件的base64地址。

$(".file").addeventlistener("input",function(){
var file=this.files.item(0);
var fr=new filereader();
fr.readasdataurl(file);
fr.Onload=function(){
$(".tp").src=this.result;
}
})

例2：为文件的读取设置一个进度条。


1

$(".file").addeventlistener("input",function(){
var file=this.files.item(0);
var fr=new filereader();
fr.readasbinarystring(file);
fr.Onloadstart=function(){ //当开始读取文件时
$(".pro").style.display="block";
}
fr.Onprogress=function(){ //读取文件过程中
var temp=(event.loaded/file.size)*100;
$("progress").value=temp;
$("progress+span").textcOntent=parseint(temp*10)/10 + "%";
}
fr.Onload=function(){ //读取结束时
window.settimeout(function(){
$(".pro").style.display="none";
},2000);
}
})
六、blob类
1、blob类的功能

实现一个新文件的创建，该类是file类的父类。

var blob=new blob(array,{ type:“mime类型” })

参数：array，数组，该数组用来指定创建文件的内容。

例1：创建一个文本文件并另存为指定的本地路径。

$(".btn").addeventlistener("click",function(){
var txt=$(".txt").value;
var array=new array();
array.push(txt);
var blob=new blob(array,{
type:"text/plain"
});
var url=url.createobjecturl(blob);
var anode=document.createelement("a");
anode.href=url;
anode.download="";
anode.click();
})

例2：实现在线的html代码执行功能。

$(".btn").addeventlistener("click",function(){
var codecOntent=$(".code").textcontent;
var array=new array(codecontent.replace(/\s+\\s+/g,'\>'));
var blob=new blob(array,{
type:"text/html"
});
var fr=new filereader();
fr.readastext(blob,'gb2312');
fr.Onload=function(){
console.log(this.result);
}
var url=url.createobjecturl(blob);
$(".iframe").src=url;
})

在html5的页面操作过程中，很多地方都可以用到files类、file类、bolb类。h5提供的这些类可以简化我们对文件的操作，结合后台功能，可以开发出多种多样的文件功能。

小海前端，具有18年web项目开发和前后台培训经验，在前端领域著有较为系统的培训教材，对vue.js、微信小程序开发、uniapp、react等全栈开发领域都有较为深的造诣。入住今日头条，希望能够更多的结识web开发领域的同仁，将web开发大力的进行普及。同时也愿意与大家进行深入的技术研讨和商业合作。