1. 程式人生 > >h5新特性 File API詳解

h5新特性 File API詳解

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詳解