h5新特性 File API詳解

  以前一直以爲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,讀取文件,並將

沒寫完呢,放假回家

相關文章
相關標籤/搜索