file是什么文件格式（file格式转换方式）
前言
在如今的项目开发过程中，上传图片或者上传头像已经变成了非常常见的操作。一般的，都需要在向后台上传图片之前，在页面中预览一下用户选择的图片。上传头像只需要预览一张图片，如果是上传图片至相册功能，则需要预览用户选择的多张图片。这样的操作在h5页面中要如何实现呢？本文系统的教大家认识h5为我们提供的files类和file类，这两个类在现代项目开发中起着举足轻重的作用。
一、html5为文件域新增的属性
html5为文件域新增了下列两个属性：
- multiple，设置文件域是否可以同时选择多个要上传的文件。这是一个没有取值的放置性属性，书写在文件域的代码中就可以使用。
- accept，用于在文件域对本地文件进行选择时对文件类型进行筛选。该属性取值为mime类型，以确定弹出的资源管理器只显示accept指定类型的文件。
同时html还规定，在项目中使用文件域，必须为文件域设置name属性。除此之外，一个表单若具备文件传递功能，必须将表单的enctype属性设置为multipart/form-data。
例如：想让用户通过文件域从本地资源管理器中选择多个图片，html代码如下所示。
<form method="get" action="uploadavatar" enctype="multipart/form-data">
<input type="file" class="tx" name="file" multiple accept="image/jpeg" />
</form>
123我们还要知道，无论使用javascript的dom操作，还是jquery的相关方法，都无法利用表单元素的value属性获得用户选择的文件地址。value属性只能得到一个包含文件全名的虚拟地址：
c:\fakepath\文件全名我们可以从本地的c盘去进行查找，fakepath路径根本不存在。那么我们要怎样才能在页面中显示用户选择的图片呢？这就要用到files类和file类了。
二、认识files类
1、如何创建files类的实例
使用files类必须先创建files类的实例，创建格式如下所示。
var 实例名 = 文件域.files;
var files=document.queryselector(".tx").files; //变量files就是files类的实例名
alert(files); //[object filelist]2、files类的属性
- length，返回files类所包含的文件个数。
3、files类的方法
- item(index)，返回files类中所包含文件中索引值为index的文件。
item()方法也可以使用files类实例名的下标来表示：files.item(0) 也可以写成 files[0]
三、认识file类
1、如何创建file类的实例
使用file类必须先创建file类的实例，创建格式如下所示。
var 实例名 = files类的实例.item(index);
var file=document.queryselector(".tx").files.item(0); //变量file就是file类的实例名
alert(file); //[object file]2、file类的属性
- name，返回文件的文件名。
- size，以字节（b）为单位返回文件的大小。
- type，返回文件的mime类型名。
- lastmodified，返回文件上一次修改的日期距离1970年1月1日的毫秒数。
- lastmodifieddate，返回文件上一次修改的日期。
四、认识单页面文件的有效地址
1、blob地址和base64地址
（1）这两类地址都可以在本页面内作为文件的有效地址，在其他页面无法使用。
（2）前端技术产生的这两类地址都无法在后台使用。
2、如何获得blob地址
var blobaddress = window.url.createobjecturl(file实例 | blob实例)
3、利用blob地址展示图片预览
例：页面中有一个文件域，同时还有一个用来预览图片的容器，html代码如下所示。
<input type="file" name="file" />
<div class="imgcontainer"></div>
12原生javascript代码如下所示。
var filenode=document.queryselector("input[type=file]");
var imgcontainer=document.queryselector(".imgcontainer");
filenode.onchange=function(){
var file=this.files.item(0);
var img=new image();
img.src=url.createobjecturl(file);
img.width=60;
img.height=60;
imgcontainer.appendchild(img);
}五、filereader类
1、filereader类的功能
filereader类可以读取到file类实例所指代的文件的内容。要想获得用户所选文件的base64地址必须使用filereader类。
2、创建filereader类的实例
var fr=new filereader();
3、filereader类的方法
- readasarraybuffer(file)：读取file文件的内容，并作为arraybuffer格式得到结果。
- readastext(file,charset)：按照指定的charset字符集以文本文件的形式读取file文件的内容。
- readasbinarystring(file)：以二进制字符串的形式读取文件。
- readasdataurl(file)：读取file文件并返回file文件的base64地址。
4、filereader类的属性
- result，在文件读取结束时返回指定方式读取文件的结果。
5、filereader类的事件
- 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：为文件的读取设置一个进度条。
<progress max="进度条的最大值" value="当前的读取进度"></progress>
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类的父类。
2、创建blob类的实例
var blob=new blob(array,{ type:“mime类型” })
参数：array，数组，该数组用来指定创建文件的内容。
3、blob类案例
例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+\</g,'\<').replace(/\>\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开发大力的进行普及。同时也愿意与大家进行深入的技术研讨和商业合作。