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