文件API客户端直接访问用户计算机的文件。在2000年之前，表单中添加了字段。文件API是为web开发提供一种安全的方式，让客户端更好的访问用户的文件，在字段的基础上，增加了一些直接访问文件信息的接口——文件集合。使用fileReader类型读取文件的数据。Thefilescollectionname：本地文件的名称size：文件的字节大小type：characters，文件的MIME类型lastModifiedDate：文件最后一次修改的时间（chrome实现了该属性）fileReadertypereadAsText(file,encoding):以纯文本方式读取文件。readAsDataURL(file)：读取文件并以URL的形式保存在result属性中。readAsBinaryString(file)：读取文件并在result属性中保存一个字符串，一个字符为一个字节。readAsArrayBuffer(file)：读取文件并在result属性中保存一个包含文件内容的ArrayBuffer。(file-filecollection;encoding-encodingtype)事件是异步读取的，因为读取的是数据。因此，fileReader提供了几个事件。进度事件：每~50ms触发一次。error事件：文件无法读取时触发，有一个属性error.code属性。1表示找不到文件，2表示安全错误，3表示读取中断，4表示文件不可读，5表示编码错误。加载事件：触发但在文件被完全读取之后。Interrupted也会触发abort事件，在load和error事件之后也会触发loadend事件。栗子可以在用户上传图片后立即显示在页面上。//html//jsfunctionshowFileImg(ele,dist){constfilesList=document.querySelector(ele);constoutput=document.querySelector(dist);filesList.addEventListener('change',function(event){//实例fileReader对象constreader=newFileReader();//获取文件集合letfiles=event.target.files[0];if(/image/.test(files.type)){//通过URL读取文件并保存在result中classreader.readAsDataURL(files);//Eventreader.onload=function(){//获取图片数据并插入进入显示节点lethtml='';output.innerHTML=html;}}else{returnfalse;}});}constfileImgA=newshowFileImg('#file','#output');读取拖放文件，创建自定义位置，当用户将文件拖放到自定义位置时，显示文件信息。//htmlDropfileshere
