欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS開發(fā)Blob和FileReader構(gòu)造函數(shù)使用示例詳解

 更新時間：2023年08月06日 11:47:30   作者：風(fēng)如也  
這篇文章主要為大家介紹了JS開發(fā)Blob和FileReader構(gòu)造函數(shù)使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

Blob

Blob對象表示一個不可變，原始數(shù)據(jù)的類文件對象。它的數(shù)據(jù)可以按文本或二進(jìn)制的格式進(jìn)行讀取。

Blob表示的不一定是javascript原生格式的數(shù)據(jù)，File接口基于Blob，繼承了blob的功能并將其擴(kuò)展使其支持用戶系統(tǒng)上的文件

要從其他非blob對象和數(shù)據(jù)構(gòu)造一個Blob，請使用Blob()構(gòu)造函數(shù)。如果要創(chuàng)建blob的子集，可以使用slice方法。

構(gòu)造函數(shù)

Blob()構(gòu)造函數(shù)返回一個新的Blob對象，blob的內(nèi)容由參數(shù)數(shù)組中給出的值的串聯(lián)組成

const aBlob = new Blob(array[, options])

構(gòu)造函數(shù)接受兩個參數(shù)，第一個參數(shù)是數(shù)組，成員是字符串或二進(jìn)制對象等，表示新生成的Blob實(shí)例對象的內(nèi)容。第二個參數(shù)可選，表示配置對象，有兩個屬性，type，默認(rèn)值為空字符串，表示將會被放入到blob中的數(shù)組內(nèi)容的MIME類型；endings，默認(rèn)值是"transpartent"，用于指定包含行結(jié)束符的字符串如何被寫入。

示例

const obj = { hello: 'world' }
const blob = new Blob([JSON.stringify(obj)], { type: 'application/json' })
console.log(blob);
// Blob {size: 17, type: 'application/json'}

實(shí)例屬性

  • Blob.size：只讀，Blob對象中所包含數(shù)據(jù)的大?。ㄗ止?jié)）
  • Blob.type：只讀，一個字符串，表示該Blob對象所包含數(shù)據(jù)的MIME類型，如果類型未知，則該值為空字符串

實(shí)例方法

  • Blob.text()：返回一個Promise且包含blob所有內(nèi)容的UTF-8格式的USVString
  • Blob.arrayBuffer()：返回一個Promise且包含blob所有內(nèi)容的二進(jìn)制格式的ArrayBuffer
  • Blob.stream()：返回一個能讀取blob內(nèi)容的ReadableStream

  • Blob.slice([start[, end[, contentType]]])：返回一個新的Blob對象，包含了源Blob對象中指定范圍內(nèi)的數(shù)據(jù)

    • start：可選，Blob里的起始下標(biāo)，如果為負(fù)數(shù)，從數(shù)據(jù)的末尾開始從后往前計算，默認(rèn)值0，如果start的長度大于源Blob的長度，返回一個長度為0并且不包含任何數(shù)據(jù)的Blob對象
    • end：可選，Blob里的一個下標(biāo)，如果為負(fù)數(shù)，從數(shù)據(jù)的末尾開始從后往前計算，默認(rèn)值為源Blob的長度
    • contentType：可選，給新的Blob賦予一個新的文檔類型 type，默認(rèn)值為空字符串
blob.slice(1, 3, 'application/json')
// Blob {size: 2, type: 'application/json'}
blob.slice(33, 3)
// Blob {size: 0, type: ''}

從Blob中提取數(shù)據(jù)

一種從Blob中讀取內(nèi)容的方法是使用FileReader

下載文件

相關(guān)知識點(diǎn)：

URL.createObjectURL()

URL.createObjectURL()會創(chuàng)建一個DOMString，其中包含一個表示參數(shù)中給出的對象的URL，這個URL的生命周期和創(chuàng)建它的窗口中的document綁定。這個新的URL對象表示指定的File對象或Blob對象。返回值格式 blob:URL

在每次調(diào)用createObjectURL()方法時，都會創(chuàng)建一個新的URL對象，即使你已經(jīng)用相同的對象作為參數(shù)創(chuàng)建過。當(dāng)不需要這些URL對象時，每個對象必須調(diào)用URL.revokeObjectURL()方法來釋放。

URL.revokeObjectURL()

URL.revokeObjectURL()方法用來釋放一個之前已經(jīng)存在的，通過調(diào)用URL.createObjectURL()方法創(chuàng)建的URL對象。當(dāng)你結(jié)束使用某個URL對象之后，應(yīng)該通過調(diào)用這個方法來讓瀏覽器知道不用在內(nèi)存中繼續(xù)保留對這個文件的引用了。

function download(blob){
    const url = URL.createObjectURL(blob)
    const link = document.createElement('a')
    document.body.appendChild(link)
    link.download = file.name // download屬性指定文件名
    link.href = url // 為href屬性指定下載鏈接
    link.click() // 觸發(fā)link的click事件
    document.body.removeChild(link)
    URL.revokeObjectURL(url)
}
// download方法傳入的參數(shù)可以是File對象也可以是Blob對象

讀取文件內(nèi)容

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <input type="file" id="input">
  <button onclick="getFile()">提交</button>
  <script>
    function getFile() {
      let fileDom = document.querySelector('#input')
      console.log(fileDom.files)
      const file = fileDom.files[0]
      const reader = new FileReader()
      reader.readAsText(file, 'UTF-8')
      reader.onload = function() {
        console.log(reader.result)
      }
    }
  </script>
</body>
</html>

FileReader

FileReader對象允許Web應(yīng)用程序異步讀取存儲在用戶計算機(jī)上的文件的內(nèi)容，使用File或Blob對象指定要讀取的文件或內(nèi)容。

注意：FileReader僅用于以安全的方式從用戶（遠(yuǎn)程）系統(tǒng)讀取文件內(nèi)容，它不能用于從文件系統(tǒng)中按路徑名簡單的讀取文件。要在js中按路徑名讀取文件，應(yīng)使用標(biāo)準(zhǔn)Ajax解決方案進(jìn)行服務(wù)器端文件讀取。

構(gòu)造函數(shù)

使用FileReader()構(gòu)造器去創(chuàng)建一個新的FileReader

const reader = new FileReader()

實(shí)例屬性

  • FileReader.error：只讀，表示在讀取文件時發(fā)生的錯誤，一個DOMException

  • FileReader.readyState：只讀，表示FileReader狀態(tài)的數(shù)據(jù)

    • 值為0，表示還沒加載任何數(shù)據(jù)，EMPTY
    • 值為1，表示數(shù)據(jù)正在被加載，LOADING
    • 值為2，表示已完成全部的讀取請求，DONE
reader = new FileReader()
console.log(reader.readyState) // 0
reader.readAsText(file, 'UTF-8')
console.log(reader.readyState) // 1
reader.onload = function() {
    console.log(reader.readyState) // 2
}
  • FileReader.result：只讀，文件的內(nèi)容，該屬性僅在讀取操作完成后才有效，數(shù)據(jù)的格式取決于使用哪種方法來啟動讀取操作

實(shí)例方法

  • FileReader.abort()：中止讀取操作，在返回時，readyState屬性為DONE

FileReader對象提供了四個方法，處理Blob對象，Blob對象作為參數(shù)傳入這些方法，然后以指定的格式返回

  • FileReader.readAsText()：將Blob或File對象根據(jù)特殊的編碼格式轉(zhuǎn)換為字符串形式內(nèi)容，可以指定文本編碼，默認(rèn)UTF-8。常用來讀取文本文件
  • FileReader.readAsArrayBuffer()：將Blob或File對象讀取的文件數(shù)據(jù)轉(zhuǎn)換為一個ArrayBuffer對象
  • FileReader.readAsBinaryString()：將Blob或File對象讀取的文件數(shù)據(jù)轉(zhuǎn)換為文件原始二進(jìn)制格式，該特性是非標(biāo)準(zhǔn)的，盡量不要在生產(chǎn)環(huán)境使用
  • FileReader.readAsDataURL()：將Blob或File對象讀取的文件數(shù)據(jù)轉(zhuǎn)換為包含一個data:URL格式的字符串（Base64編碼）

事件處理

  • FileReader.onloadstart：處理loadstart事件，該事件在讀取操作開始時觸發(fā)
  • FileReader.onload：處理load事件，該事件在讀取操作完成時觸發(fā)
  • FileReader.onloadend：處理loadend事件，該事件在讀取操作結(jié)束時（要么成功，要么失?。┯|發(fā)
  • FileReader.onerror：處理error事件，該事件在讀取操作發(fā)生錯誤時觸發(fā)
  • FileReader.onabort：處理abort事件，該事件在讀取操作被中斷時觸發(fā)
  • FileReader.onprogress：處理progress事件，該事件在讀取Blob時觸發(fā)
reader = new FileReader()
reader.readAsText(file, 'UTF-8')
reader.onloadstart = function() {
    console.log("start");
}
reader.onprogress = function() {
    console.log("progress");
}
reader.onload = function() {
    console.log("load")
}
reader.onloadend = function() {
    console.log("end")
}
// start
// progress
// load
// end

以上就是JS開發(fā)Blob和FileReader構(gòu)造函數(shù)使用示例詳解的詳細(xì)內(nèi)容，更多關(guān)于JS構(gòu)造函數(shù)Blob FileReader的資料請關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評論