JS前端使用Blob和File读取文件的操作代码

 更新时间:2022年11月04日 10:27:39   作者:zhq2005095  
JavaScript 无法处理二进制数据。如果一定要处理的话,只能使用 charCodeAt() 方法,一个个字节地从文字编码转成二进制数据,还有一种办法是将二进制数据转成 Base64 编码,再进行处理,这篇文章主要介绍了JS前端使用Blob和File读取文件,需要的朋友可以参考下

历史上,JavaScript 无法处理二进制数据。如果一定要处理的话,只能使用 charCodeAt() 方法,一个个字节地从文字编码转成二进制数据,还有一种办法是将二进制数据转成 Base64 编码,再进行处理。这两种方法不仅速度慢,而且容易出错。ECMAScript 5 引入了 Blob 对象,允许直接操作二进制数据。

Blob

对象是一个代表二进制数据的基本对象,在它的基础上,又衍生出一系列相关的API,用来操作文件。

  • File对象:负责处理那些以文件形式存在的二进制数据,也就是操作本地文件;
  • FileList对象:File对象的网页表单接口;
  • FileReader对象:负责将二进制数据读入内存内容;
  • URL对象:用于对二进制数据生成URL Blob

Blob (Binary Large Object) 对象代表了一段二进制数据,提供了一系列操作接口。其他操作二进制数据的API(比如 File 对象),都是建立在 Blob 对象基础上的,继承了它的属性和方法。

创建 Blob 类型的对象

生成 Blob 对象有两种方法:一种是使用 Blob 构造函数,另一种是对现有的 Blob 对象使用 slice 方法切出一部分。

1. new Blob()

Blob 构造函数,接受两个参数。第一个参数是一个包含实际数据的数组,这个数组中的元素可以为 DOMString ,或者 ArrayBuffer ,第二个参数是数据的类型,这两个参数都不是必需的。

var domstring = '<div>Hello world</div>';
var blob1 = new Blob([domstring], {type: 'text/html'});
var buffer = new ArrayBuffer(8);
var blob2 = new Blob([buffer], {type: 'text/plain'});

2. blob.slice()

此方法返回一个新的 Blob 对象,包含了原 Blob 对象中指定范围内的数据

Blob.slice(start:number, end:number, contentType:string)。start:开始索引,默认为0;end:截取结束索引(不包括end);contentType:新Blob的MIME类型,默认为空字符串

Blob 对象的属性

  • Blob.size: Blob 对象中所包含数据的大小(字节)。该属性为只读;
  • Blob.type: 一个字符串,表明该 Blob 对象所包含数据的 MIME 类型。如果类型未知,则该值为空字符串。该属性为只读

Blob 应用实例

下面是一个使用XMLHttpRequest对象,将大文件分割上传的例子。

function upload(blobOrFile) {
  let xhr = new XMLHttpRequest();
  xhr.open('post', '/server', true);
  xhr.onload = function(e) {};
  xhr.send(blobOrFile);
}

document.querySelctor('input[type="file"]').addEventListener('change', function() {
  let blob = this.files[0];
  const BYTES_PER_CHUNK = 1024 * 1024; // 1MB chunk size
  const SIZE = blob.size;
  let start = 0;
  let end = BYTES_PER_CHUNK;
  while(start < end) {
    upload(blob.slice(start, end));
    start = end;
    end = start + BYTES_PER_CHUNK;
  }
}, false);

File

File 接口提供有关文件的信息,并允许网页中的 JavaScript 访问其内容。

File 对象可以用来获取某个文件的信息,还可以用来读取这个文件的内容。通常情况下, File 对象是来自用户在一个 <input> 元素上选择文件后返回的 FileList 对象,也可以是来自由拖放操作生成的 DataTransfer 对象。

用户在选择一个或者多个文件后,可以通过 File API访问这些File 对象,这些对象被包含在一个 FileList 对象中。所有 typefileinput 都有一个 files 属性,通过 Element.files 可以返回 FileList 对象。

<body>
    <input type="file" id="fileInput" name="file" multiple="multiple" accept="image/*">
    <script>
        var fileInput = document.querySelector("#fileInput");
        fileInput.addEventListener("change", function (event) {
          // 文件列表对象
          var fileList = this.files;
          // 获取第一个文件
          var file = fileInput.files[0];
          // 文件名
          var filename = file.name;
          // 文件大小
          var filesize = file.size;
          //文件的 MIME 类型,如果分辨不出类型,则为空字符串,该属性只读
          var type = file.type; 
          // 文件的上次修改时间,格式为时间戳
          var lastModified = file.lastModified;
          // 文件的上次修改时间,格式为 Date 对象实例
          var lastModifiedDate = file.lastModifiedDate;
        }, false);

        console.log(fileList);
        // 上传了两个文件,FileList {0: File, 1: File, length: 2}
    </script>
</body>

File 对象的属性:

  • name:文件名,该属性只读。
  • size:文件大小,单位为字节,该属性只读。
  • type:文件的 MIME 类型,如果分辨不出类型,则为空字符串,该属性只读。
  • lastModified:文件的上次修改时间,格式为时间戳。
  • lastModifiedDate:文件的上次修改时间,格式为 Date 对象实例

File 对象的方法:

File 接口没有定义任何方法,但是它从 Blob 接口继承了以下方法:

Blob.slice([start[, end[, contentType]]])

返回一个新的 Blob 对象,它包含有源 Blob 对象中指定范围内的数据。

FileReader

我们知道 Blob 对象只是二进制数据的容器,本身并不能操作二进制,FileReader 对象就是专门操作二进制数据的,FileReader 主要用于将文件内容读入内存,通过一系列异步接口,可以在主线程中访问本地文件。

构造函数

var reader = new FileReader();

属性

  • FileReader.error:表示在读取文件时发生的错误;
  • FileReader.readyState:0-还没有加载任何数据, 1-数据正在被加载, 2-已完成全部的读取请求;
  • FileReader.result:文件的内容。该属性仅在读取操作完成后才有效,数据的格式取决于使用哪个方法来启动读取操作。

事件

  • FileReader.onabort:处理 abort 事件。该事件在读取操作被中断时触发;
  • FileReader.onerror:处理 error 事件。该事件在读取操作发生错误时触发;
  • FileReader.onload:处理 load 事件。该事件在读取操作完成时触发;
  • FileReader.onloadstart:处理 loadstart 事件。该事件在读取操作开始时触发;
  • FileReader.onloadend:处理 loadend 事件。该事件在读取操作结束时(要么成功,要么失败)触发;
  • FileReader.onprogress:处理 progress 事件。该事件在读取 Blob 时触发

方法

  • FileReader.abort():中止读取操作。在返回时,readyState 属性为DONE;
  • FileReader.readAsArrayBuffer():开始读取指定的 Blob 中的内容, 一旦完成, result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象;
  • FileReader.readAsBinaryString():开始读取指定的 Blob 中的内容。一旦完成,result 属性中将包含所读取文件的原始二进制数据, 该方法将文件读取为二进制字符串,通常我们将它传送到后端,后端可以通过这段字符串存储文件;
  • FileReader.readAsDataURL():开始读取指定的 Blob 中的内容。一旦完成,result 属性中将包含一个 data: URL 格式的字符串以表示所读取文件的内容;
  • FileReader.readAsText():开始读取指定的 Blob 中的内容。一旦完成,result 属性中将包含一个字符串以表示所读取的文件内容, 该方法有两个参数,其中第二个参数是文本的编码方式,默认值为 UTF-8。这个方法非常容易理解,将文件以文本方式读取,读取的结果即是这个文本文件中的内容。

实际应用

上传图片后直接进行预览,而不用先经过后台。

var input  = document.getElementById("file"); //input file
input.onchange = function(){
    var file = this.files[0];
    if(!!file){
        var reader = new FileReader();
        // 将图片转成DataURL格式
        reader.readAsDataURL(file);
        reader.onload = function(){
            //读取完毕后输出结果
           document.getElementById("file_img").src = reader.result //显示上传的图片
           console.log(reader.result);
        }
    }
}

URL

URL.createObjectURL(blob)

//blob参数是一个File对象或者Blob对象.
var objecturl =  window.URL.createObjectURL(blob);

上面的代码会对二进制数据生成一个 URL ,这个 URL 可以放置于任何通常可以放置 URL 的地方,比如 img 标签的 src 属性。需要注意的是,即使是同样的二进制数据,每调用一次 URL.createObjectURL 方法,就会得到一个不一样的 URL

这个 URL 的存在时间,等同于网页的存在时间,一旦网页刷新或卸载,这个 URL 就失效。(File 和 Blob 又何尝不是这样呢)除此之外,也可以手动调用 URL.revokeObjectURL 方法,使 URL 失效。

URL.revokeObjectURL(objectURL);

当不再需要这些 URL 对象时,每个对象必须通过调用 URL.revokeObjectURL() 方法来释放。浏览器会在文档退出的时候自动释放它们,但是为了获得最佳性能和内存使用状况,你应该在安全的时机主动释放掉它们。

实际应用

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文件上传</title>
    <script src="./lib/jquery.js"></script>
    <style type="text/css">
        #file{
            display: block;
            width: 400px;
            height: 300px;
            opacity:0;
            margin: -300px 0 0 0;            
        }
        #preview{
            display: block;
            width: 400px;
            height: 300px;
        }
    </style>
</head>
<body>
    <img id="preview" src="" alt="点击上传图片"/>
    <input type="file" id="file" />
</body>
</html>
<script type="text/javascript">
  $('#file').on('change', function(){
    //获取文件列表对象
    var fileList = $('#file')[0].files;
    //创建文件流获取文件地址
    var src = window.URL.createObjectURL(fileList[0]);     
    //设置图片路径  
    $("#preview").attr("src", src);
    $("#preview").load(function() {
      window.URL.revokeObjectURL(src);
    });
 });
</script>

参考资料

Blob - Web API 接口参考 | MDN

Blob,FileReader全面解析

到此这篇关于JS前端使用Blob和File读取文件的文章就介绍到这了,更多相关js使用Blob和File读取文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 禁用Enter键表单自动提交实现代码

    禁用Enter键表单自动提交实现代码

    这篇文章主要介绍了禁用Enter键表单自动提交实现代码,需要的朋友可以参考下
    2014-05-05
  • Javascript 实现TreeView CheckBox全选效果

    Javascript 实现TreeView CheckBox全选效果

    Javascript 实现TreeView CheckBox 选中父节点时所有子节点全选,取消时全部取消
    2010-01-01
  • TypeScript中函数重载写法

    TypeScript中函数重载写法

    这篇文章主要介绍了TypeScript中函数重载写法,TypeScript 提供了函数重载功能,下面文章围绕TypeScript函数重载续航管资料展开内容,具有一定得参考价值,需要的朋友可以参考一下
    2021-12-12
  • JavaScript中concat复制数组方法浅析

    JavaScript中concat复制数组方法浅析

    在本篇文章里小编给大家总结了关于JavaScript中concat复制数组方法知识点,有需要的朋友们可以学习下。
    2019-01-01
  • js防抖函数和节流函数使用场景和实现区别示例分析

    js防抖函数和节流函数使用场景和实现区别示例分析

    这篇文章主要介绍了js防抖函数和节流函数使用场景和实现区别,结合实例形式详细分析了js防抖函数和节流函数基本功能、定义、用法区别及操作注意事项,需要的朋友可以参考下
    2020-04-04
  • js+canvas绘制矩形的方法

    js+canvas绘制矩形的方法

    这篇文章主要介绍了js+canvas绘制矩形的方法,涉及JavaScript调用html5的canvas组件绘制图形的相关技巧,需要的朋友可以参考下
    2016-01-01
  • javascript 中iframe高度自适应(同域)实例详解

    javascript 中iframe高度自适应(同域)实例详解

    这篇文章主要介绍了javascript 中iframe高度自适应(同域)实现代码的相关资料,需要的朋友可以参考下
    2017-05-05
  • 详解JavaScript实现动态的轮播图效果

    详解JavaScript实现动态的轮播图效果

    这篇文章主要介绍了JavaScript实现动态的轮播图效果,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 微信小程序实现打卡签到页面

    微信小程序实现打卡签到页面

    这篇文章主要为大家详细介绍了微信小程序实现打卡签到页面,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • 微信小程序实现搜索框功能

    微信小程序实现搜索框功能

    这篇文章主要为大家详细介绍了微信小程序实现搜索框功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11

最新评论