成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

瀏覽器中File,FileReader,Blob, FormData, ArrayBuffer等對象

Cristalven / 1771人閱讀

摘要:文件的類型,如果分辨不出類型,則為空字符串,該屬性只讀。二進(jìn)制數(shù)據(jù)的類型,全部為小寫,如果類型未知,則該值為空字符串。對象的方法,將二進(jìn)制數(shù)據(jù)按照字節(jié)分塊,返回一個新的對象。對象用于生成指向?qū)ο蠡驅(qū)ο蟮摹?/p>

File對象:負(fù)責(zé)處理那些以文件形式存在的二進(jìn)制數(shù)據(jù),也就是操作本地文件;
FileList對象:File對象的網(wǎng)頁表單接口;
FileReader對象:負(fù)責(zé)將二進(jìn)制數(shù)據(jù)讀入內(nèi)存內(nèi)容;
URL對象:用于對二進(jìn)制數(shù)據(jù)生成URL。

1.File

提供了如下的元信息,通過FileList中的單個文件調(diào)用
name:文件名,該屬性只讀。
size:文件大小,單位為字節(jié),該屬性只讀。
type:文件的MIME類型,如果分辨不出類型,則為空字符串,該屬性只讀。
lastModified:文件的上次修改時間,格式為時間戳。
lastModifiedDate:文件的上次修改時間,格式為Date對象實例。

2.FileList

參照http://javascript.ruanyifeng.com/htmlapi/file.html

其中說明的兩個FileList
(1)使用input上傳文件,直接通過 ,其中this.files就是FileList
(2)使用拖拽的方式

    function(evt){
        var files = evt.dataTransfer.files; // FileList object.
    }
3.FileReader

FileReader API用于讀取文件,即把文件內(nèi)容讀入內(nèi)存。它的參數(shù)是File對象或Blob對象。

(1)readAsBinaryString(Blob|File):返回二進(jìn)制字符串,該字符串每個字節(jié)包含一個0到255之間的整數(shù)。
(2)readAsText(Blob|File, opt_encoding):返回文本字符串。默認(rèn)情況下,文本編碼格式是’UTF-8’,可以通過可選的格式參數(shù),指定其他編碼格式的文本。
(3)readAsDataURL(Blob|File):返回一個基于Base64編碼的data-uri對象。
(4)readAsArrayBuffer(Blob|File):返回一個ArrayBuffer對象。

4.Blob

參照http://javascript.ruanyifeng.com/htmlapi/file.html

1.全稱Binary Large Object,即二進(jìn)制大數(shù)據(jù)對象,提供相應(yīng)的接口;其他操作二進(jìn)制的對象都是建立在Blob基礎(chǔ)之上,并繼承了其屬性和方法。

2.Blob只有兩個屬性,分別為size和type;
size:二進(jìn)制數(shù)據(jù)的大小,單位為字節(jié)。
type:二進(jìn)制數(shù)據(jù)的MIME類型,全部為小寫,如果類型未知,則該值為空字符串。

3.相關(guān)方法 】
(1)Blob構(gòu)造函數(shù),接受兩個參數(shù)。第一個參數(shù)是一個包含實際數(shù)據(jù)的數(shù)組,第二個參數(shù)是數(shù)據(jù)的類型,這兩個參數(shù)都不是必需的。
(2)Blob對象的slice方法,將二進(jìn)制數(shù)據(jù)按照字節(jié)分塊,返回一個新的Blob對象。

5.FormData 6.ArrayBuffer 7.Canvas 8.URL

URL對象用于生成指向File對象或Blob對象的URL。

var objecturl =  window.URL.createObjectURL(blob);//生成 
window.URL.revokeObjectURL(objectURL);//是失效
9.將Base64轉(zhuǎn)化為Form-Data形式
function base64ToFile (baseUrl) {
  let byteString = window.atob(baseUrl.split(",")[1])
  let mimeString = baseUrl.split(",")[0].split(":")[1].split(";")[0]

  // 類型數(shù)組
  let ia = new Uint8Array(byteString.length)
  for (let i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i)
  }
  let formdata = new window.FormData()
  let file = new window.Blob([ia], {
    type: mimeString
  })
  formdata.append("file", file, "cms." + mimeString.split("/")[1])
  return formdata
}

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/86484.html

相關(guān)文章

  • AJAX 的進(jìn)階使用(BlobArrayBuffer、FormData、Document、JSON

    摘要:讓應(yīng)用程序擁有異步讀取存儲在用戶計算機(jī)上文件或原始數(shù)據(jù)緩沖區(qū)的能力,使用或?qū)ο笾付ㄒx取的文件或數(shù)據(jù)。對象用來表示通用的固定長度的原始二進(jìn)制數(shù)據(jù)緩沖區(qū)。事實上,沒有名為的全局對象,也沒有一個名為的構(gòu)造函數(shù)。 Ajax 即 Asynchronous Javascript And XML (異步 JavaScript 和 XML),是指一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)。在無需重新加載整...

    wean 評論0 收藏0
  • 前端js壓縮圖片并上傳

    公司最近有需要壓縮上傳圖片功能,查找了些資料并實現(xiàn)了一把。 主要用到的原生組件:FileReader、Canvas、Blob、FormData 邏輯步驟: FileReader.readAsDataURL將上傳的圖片文件轉(zhuǎn)為Base64格式 將img繪制到canvas上,canvas.toDataURL壓縮圖片 new Blob將壓縮后的Base64轉(zhuǎn)為Blob格式 FormData.appen...

    peixn 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<