JavaScrip File类拓展

Posted 2020-10-14

##今天在做jsp的文件上传功能，想着上传文件后在当前页面把选取的文件信息展现出来，查来查去，发现了js中的file类，之前在w3c和runboob盯了好久找找不到。。。。不过终于还是在网上查到了这个类！

1.在表单元素上<input type="fiel" name="file" id="file" />，可以选择一个或多个文件，通过获取文件元素对象的集合files，来操作每一个对象files[i]；

用法：DOM操作

　　var files=document.getElementById("file").files;

　　var file_length = files.length;//files的文件数量

　　var file=files.file[i];//每一个file对象对应一个文件。

　　file.name//获取本地文件系统的文件名。

　　file.size//文件的字节大小。

　　file.type//字符串类型,文件的MIME类型。

　　file.lastModifiedDate//文件的最后修改时间。(只使用于Chrome浏览器)

　　

2.通过FileReader类型读取文件中的数据（异步文件读取）

FileReader有一下几种读取文件数据的方法

1）.readAsText(file,encoding);以纯文本的形式读取文件，将读取到的文件保存到result属性。encoding参数用于指定编码类型，是可选的。

2）.readAsDataURL(file);读取文件并将文件数据以URL形式保存到result属性中。（读取图像文件常用方法）

3）.readAsBinaryString(file);读取文件并将一个字符串保存在result属性中，字符串中的每个字符表示一字节。

4）.readAsArrayBuffer(file);读取文件并将一个包含文件内容的ArrayBuffer保存在result属性中。

3.FileReader提供了几个事件最有用的三个事件，progress,error,load,分别表示是否又读取了新数据，是否发生了错误，是否已经读完整个文件。

使用方法：

var reader=new FileReader();

if(/image/.test(file[0].type)){//操作图像

　　reader.readAsDataURL(file[0]);

　　var type=‘image‘;

}else{//操作文本

　　read.readAsText(file[0]);

　　var type=‘text‘;

}

reader.onerror=function(){

　　//出错时执行

}

reder.onprogress=function(){

//有加载新数据时执行

}

reder.onload=function(){

　　if（type==‘image‘）{

　　　　var html="<img src=\" "+reader.result+" \">";//已经加载完了执行

　　}else if(type=‘text‘){

　　　　var html=reader.result

　　}

　　Obj.innerHTML=html;//显示在指定元素对象上

}