h5新特性 File API詳解
阿新 • • 發佈:2017-09-29
sda 文件讀取 預覽 文件名 標簽 dom 直接 mod 詳解
之前一直覺得h5的新特性就是一些新標簽呢,直到想研究一下圖片上傳預覽的原理,才發現還是有好多新的api的,只是不兼容ie低版本,挺可惜的,
File API在表單中文件輸入字段基礎上,又添加了一些直接訪問文件信息的接口。H5在DOM中為文件輸入元素添加了一個files集合,在通過表單元素選擇了一個或多個文件時,files集合中將包含一組file對象,每個file對象對應一個文件,每個file對象都有下列只讀屬性:
1、name:本地文件系統的文件名;
2、size:文件的字節大小;
3、type:字符串,文件的MIME類型;
4、lastModifiedDate:字符串,文件上一次被修改的事件,(只有chrome實現了這個屬性)
例子:
現在我們獲取id為“files-list”的input,type為file,的元素,將該元素上傳的文件輸出到控制臺:
FileReader類型:
FileReader類型實現的是一種異步的文件讀取機制,可以把fileReader想象成XMLHttpResquest,區別就是FileReader讀取的是文件,而不是遠程服務,為了讀取文件中的數據,FileReader提供了如下幾種方法:
1、readAsTxt,以純文本的形式讀取文件,將讀取到的文件保存到result屬性中;
2、readAsDataURL,讀取文件,並將文件數據URL保存到result屬性中;
3、readAsArrayBuffer,讀取文件,並將
沒寫完呢,放假回家
h5新特性 File API詳解