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

最新推荐文章于 2025-02-27 11:04:51 发布

木木林_

最新推荐文章于 2025-02-27 11:04:51 发布

阅读量9.6k

点赞数 7

分类专栏： js 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/qq_44812835/article/details/111288222

版权

js 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了前端中如何利用File、Blob和FileReader对象进行文件下载和图片预览。Blob对象作为二进制数据容器，File对象用于处理文件，而FileReader则用于异步读取文件内容。文章详细阐述了这三个对象的构造和方法，并提供了具体的下载HTML文件和图片预览的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js虽然没有操作文件的能力，但是前端还是有一些文件和二进制的应用，比如文件下载、图片预览等
今天就主要以实现以上两个功能展开探讨
首先js文件相关的有Blob、File还有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）参数 bits与Blob的array一致，name:表示文件名称，或者文件路径。
options :type:也与Bolb一致， lastModified: 数值，表示文件最后修改时间的 Unix 时间戳

3.FileReader

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

2）常用方法及事件

abort():void 终止文件读取操作
readAsArrayBuffer(file):void 异步按字节读取文件内容，结果用ArrayBuffer对象表示
readAsBinaryString(file):void 异步按字节读取文件内容，结果为文件的二进制串
readAsDataURL(file):void 异步读取文件内容，结果用data:url的字符串形式表示
readAsText(file,encoding):void 异步按字符读取文件内容，结果用字符串形式表示

onabort 当读取操作被中止时调用
onerror 当读取操作发生错误时调用
onload 当读取操作成功完成时调用
onloadend 当读取操作完成时调用,不管是成功还是失败
onloadstart 当读取操作将要开始之前调用
onprogress 在读取数据过程中周期性调用

我们先来实现以下载功能–下载一个html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a id='download'>点击下载</a>
    //(这里download 可以直接使用Id名作为元素，声明一下以防大家疑惑)
</body>
<script>
    let str = `<div><h1>下载成功！</h1></div>`;
    // const file = new File([str],{type:'text/html'}) 使用File也一样
    const file = new Blob([str],{type:'text/html'})
    download.setAttribute('download','index.html');
    download.href = URL.createObjectURL(file); //将二进制文件转换为临时链接	
</script>
</html>

图片预览
使用Blob实现

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input id="file" type="file">
</body>
<script>
     file.addEventListener('change', (e) => {
        let file = e.target.files[0]; //是一个二进制文件类型
        let url = URL.createObjectURL(file);
        let img = document.createElement('img');
        img.src = url;
        document.body.appendChild(img);
})
</script>
</html>

使用FileReader实现

<script>
     file.addEventListener('change',(e)=>{
        let file = e.target.files[0]; //是一个二进制文件类型
        let fileReader = new FileReader();
        fileReader.readAsDataURL(file);//读成base64的字符串
        fileReader.onload = function(){ // 读取成功后
           let img = document.createElement('img');
            img.src = fileReader.result;
            document.body.appendChild(img);
        }
})
</script>