前端中的文件(File)、二进制(Blob)、文件读取(FileReader)应用--(文件下载、图片预览)

本文介绍了前端中如何利用File、Blob和FileReader对象进行文件下载和图片预览。Blob对象作为二进制数据容器,File对象用于处理文件,而FileReader则用于异步读取文件内容。文章详细阐述了这三个对象的构造和方法,并提供了具体的下载HTML文件和图片预览的示例。
摘要由CSDN通过智能技术生成
  • js虽然没有操作文件的能力,但是前端还是有一些文件和二进制的应用,比如文件下载图片预览
  • 今天就主要以实现以上两个功能展开探讨
  • 首先js文件相关的有BlobFile还有FileReader
  • 我们先依次介绍一下这三个对象
    1.Blob

1)HTML5中的Blob对象只是二进制数据的容器,本身并不能操作二进制

2)使用时通过构造函数实例化对象,lob() 构造函数返回一个新的 Blob 对象

let aBlob = new Blob( array, options );

参数:
(1) array 是一个由ArrayBuffer, ArrayBufferView, Blob, DOMString 等对象构成的 Array
(2) options 它可能会指定如下两个属性:type(数组内容的MIME类型)和**endings**(主要是处理结束符,比如native:结束符会被更改为操作系统文件系统的换行符,transparent:就保持不变)

3)blob.slice() 方法用于创建一个包含源 Blob的指定字节范围内的数据的新 Blob 对象。

2.File

1)File其实是继承自Blob类的,比如input元素type为file 值就是file对象
2) File() 构造器创建新的 File 对象实例。

var myFile = new File(bits, name[, options]);

3)参数 bitsBlobarray一致,name:表示文件名称,或者文件路径。
options :type:也与Bolb一致, lastModified: 数值,表示文件最后修改时间的 Unix 时间戳

3.FileReader

1)使用FileReader对象,web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容,可以使用File对象或者Blob对象来指定所要处理的文件或数据。

2)常用方法及事件

abort():void 终止文件读取操作
readAsArrayBuffer(file)
  • 7
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

木木林_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值