JavaScript

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > JS构造函数Blob FileReader

JS开发Blob和FileReader构造函数使用示例详解

作者：风如也

这篇文章主要为大家介绍了JS开发Blob和FileReader构造函数使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

Blob

Blob对象表示一个不可变，原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取。

Blob表示的不一定是javascript原生格式的数据，File接口基于Blob，继承了blob的功能并将其扩展使其支持用户系统上的文件

要从其他非blob对象和数据构造一个Blob，请使用Blob()构造函数。如果要创建blob的子集，可以使用slice方法。

构造函数

Blob()构造函数返回一个新的Blob对象，blob的内容由参数数组中给出的值的串联组成

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

构造函数接受两个参数，第一个参数是数组，成员是字符串或二进制对象等，表示新生成的Blob实例对象的内容。第二个参数可选，表示配置对象，有两个属性，type，默认值为空字符串，表示将会被放入到blob中的数组内容的MIME类型；endings，默认值是"transpartent"，用于指定包含行结束符的字符串如何被写入。

示例

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

实例属性

实例方法

blob.slice(1, 3, 'application/json')
// Blob {size: 2, type: 'application/json'}
blob.slice(33, 3)
// Blob {size: 0, type: ''}

从Blob中提取数据

一种从Blob中读取内容的方法是使用FileReader

下载文件

相关知识点：

URL.createObjectURL()

URL.createObjectURL()会创建一个DOMString，其中包含一个表示参数中给出的对象的URL，这个URL的生命周期和创建它的窗口中的document绑定。这个新的URL对象表示指定的File对象或Blob对象。返回值格式 blob:URL

在每次调用createObjectURL()方法时，都会创建一个新的URL对象，即使你已经用相同的对象作为参数创建过。当不需要这些URL对象时，每个对象必须调用URL.revokeObjectURL()方法来释放。

URL.revokeObjectURL()

URL.revokeObjectURL()方法用来释放一个之前已经存在的，通过调用URL.createObjectURL()方法创建的URL对象。当你结束使用某个URL对象之后，应该通过调用这个方法来让浏览器知道不用在内存中继续保留对这个文件的引用了。

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() // 触发link的click事件
    document.body.removeChild(link)
    URL.revokeObjectURL(url)
}
// download方法传入的参数可以是File对象也可以是Blob对象

读取文件内容

<!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应用程序异步读取存储在用户计算机上的文件的内容，使用File或Blob对象指定要读取的文件或内容。

注意：FileReader仅用于以安全的方式从用户（远程）系统读取文件内容，它不能用于从文件系统中按路径名简单的读取文件。要在js中按路径名读取文件，应使用标准Ajax解决方案进行服务器端文件读取。

构造函数

使用FileReader()构造器去创建一个新的FileReader

const reader = new FileReader()

实例属性

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对象提供了四个方法，处理Blob对象，Blob对象作为参数传入这些方法，然后以指定的格式返回

事件处理

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开发Blob和FileReader构造函数使用示例详解的详细内容，更多关于JS构造函数Blob FileReader的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:
阅读全文