js中的Blod、File、FileList、FileReader对象

前端在下载文件的时候经常会使用到Blob、File、FileReader对象，那么它们到底是干嘛的，怎么使？

一、我们可以通过Blob对象直接来操作二进制文件。后端返给我们文件的内容我们就可以用Blob对象来进行读取。
Blob()构造函数接受两个参数，第一个参数为数组，里面可以是字符串或者者二进制对象，第二个参数表示数据的类型。默认是空字符串。

  let obj = {name: "yz",};let blodb= new Blob([JSON.stringify(obj)], { type: "text/html" });console.log(blob); //打印的结果看下图

在上图可以看到Blob钩子函数的实例对象的方法和属性：
文件的大小属性：size
文件的类型属性：type
可以复制文件的内容方法：slice(start,end,contenType) 开始值默认为0，结束值为size的大小，但是不包括它本身。

二、File对象本身就代表了一个文件、可以使用Blob对象的地方都可以使用File对象、它继承了Blob对象、我们可以看一个例子：

   <input type="file" id="box" /><script>let input = document.getElementById("box")console.log(input);input.onchange = ()=>{console.log(input.files); //打印结果如下}

可以看出生成了一个数组对象。用户选中文件以后浏览器生成了一个数组，其实它们都是File构造函数的实例对象。
我们可以自己使用File()构造函数生成实例文件对象如下：

  let file=new File([{a:"yz"}],"我是File构造函数的实例",{type:"text/html"})//  File构造函数的参数和Blob()基本一致。一个参数为一个数组传二进制对象或者字符串，第二个参数为文件名，第三个为文件类型，还可以传文件的修改时间。console.log(file); 打印如下图

可以看出我们自己生成的File实例对象，和我们选择文件浏览器生成的实例对象，参数一致，那么就可以知道浏览器生成其实是调用了File构造函数。在上面三幅图可以看出，File()构造函数是继承了Blob()但是又在其基础上加了一些属性。

三、FileList对象：
FileList对象类似数组的对象，它里面就包括每一个File实例对象。

四、FileReader对象：
FileReader对象可以读取Blob、File实例对象里面的内容。浏览器也提供了原生的构造函数
FileReader()来生成实例。

         var reader=new FileReader()console.log(reader) //打印结果如下图

下面是读取文件内容的一个例子：

  <input type="file" onchange="onChange(event)" /><script>function onChange(event) {var file = event.target.files[0];var reader = new FileReader();reader.onload = function (event) {console.log(event.target);//打印出来的文件的内容如下图};reader.readAsText(file); }

js中的Blod、File、FileList、FileReader对象相关推荐

js中如何把字符串转化为对象
js中如何把字符串转化为对象例如 var test='{ colkey: "col", colsinfo: "NameList" }' 很明显是一个对象,但如 ...
JS基础--函数与BOM、DOM操作、JS中的事件以及内置对象
前言絮叨絮叨这里是JS基础知识集中讲解的第三篇,也是最后一篇,三篇JS的基础,大多是知识的罗列,并没有涉及更难得东西,干货满满!看完这一篇后,相信许多正在像我一样正处于初级阶段的同学, ...
在JS中利用for...in循环遍历对象
for...in循环可以在js中遍历对象或者数组,比如当我们想要输出内容中的所有对象,就可以使用for...in循环 <script> //使用方法 for(键 in 对象)var obj ...
JS 中判断一个对象是否为数组对象？
在面向对象中判断一个对象中判断一个对象是否为数组 1 可以查找它的原型 (__proto__) 是否为数组对象的原型对象 var arr1 = [1,2,3];console.log(arr1._ ...
js中判断空数组和空对象的方法
复习的时候做一些学习的笔记总结. javascript的值的类型: 原始值:number.string.boolean.undefined.null.symbol(ES6).bigint(ES10) ...
JS中函数的prototype属性和对象的__proto__属性
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
js中如何把字符串转化为对象、数组示例代码
很明显是一个对象,但如何把文本转为对象呢.使用eval();注意一定要加括号,否则会转换失败把文本转化为对象 var test='{ colkey: "col", colsin ...
js中图片base64格式转文件对象
通常我们使用裁剪工具裁剪图片后输出的格式为base64格式,而有时需要将图片转为源文件. function dataURLtoFile(dataurl, filename) {//将base64转换为 ...
js中Array.prototype.find() 方法在对象数组上无效果，捉急。。。
我在使用Array.prototype.find() 方法时,发现在对象数组上没有正确返回,过程如下: roleResourceList是个对象数组: 里面的数据是这样的: 调用find()方法: d ...

js中的Blod、File、FileList、FileReader对象

js中的Blod、File、FileList、FileReader对象相关推荐

最新文章

热门文章