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

2022-11-13 19:20

短信预约 -IT技能 免费直播动态提醒

历史上，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 对象中。所有 type 为 file 的 input 都有一个 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").class="lazy" data-src = reader.result //显示上传的图片
           console.log(reader.result);
        }
    }
}

URL

URL.createObjectURL(blob)

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

上面的代码会对二进制数据生成一个 URL ，这个 URL 可以放置于任何通常可以放置 URL 的地方，比如 img 标签的 class="lazy" data-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 class="lazy" data-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" class="lazy" data-src="" alt="点击上传图片"/>
    <input type="file" id="file" />
</body>
</html>
<script type="text/javascript">
  $('#file').on('change', function(){
    //获取文件列表对象
    var fileList = $('#file')[0].files;
    //创建文件流获取文件地址
    var class="lazy" data-src = window.URL.createObjectURL(fileList[0]); 　　　　
    //设置图片路径  
    $("#preview").attr("class="lazy" data-src", class="lazy" data-src);
    $("#preview").load(function() {
      window.URL.revokeObjectURL(class="lazy" data-src);
    });
　});
</script>

参考资料

Blob - Web API 接口参考 | MDN

Blob,FileReader全面解析

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

免责声明：

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

js使用Blob和File读取文件 js读取文件

阅读原文内容投诉

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

下载Word文档到电脑，方便收藏和打印～

下载Word文档

猜你喜欢

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

JavaScript 无法处理二进制数据。如果一定要处理的话，只能使用 charCodeAt() 方法，一个个字节地从文字编码转成二进制数据，还有一种办法是将二进制数据转成 Base64 编码，再进行处理，这篇文章主要介绍了JS前端使用Blob和File读取文件,需要的朋友可以参考下

2022-11-13

使用JS操作文件(FileReader读取--node的fs)

2024-04-02

如何使用PHP进行文件读写操作？（PHP读取和写入文件的方法有哪些？）

PHP提供多种文件读写方法，包括：fopen()和fwrite()、file_put_contents()、file()和file_put_contents()、fopen()和fgets()、fseek()和fread()、copy()、unlink()、PHPstreams、FilesystemIterator和FileInfo。选择方法取决于需求和限制。fopen()和fwrite()用于低级操作，file_put_contents()和file()更简单，PHPstreams和Filesystem

2024-04-02

使用python下载大型文件显示进度条和下载时间的操作代码

2024-04-02

编程热搜

怎么安装配置nodejs
Vue中Vue.extend()的使用及解析
这篇文章主要介绍了Vue中Vue.extend()的使用及解析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
NodeJs模拟登陆正方教务
网上已经有很多关于模拟登陆正方教务的作品了，基于 PHP，Python，Java，.Net 加上我自己尝试的NodeJs，这几门语言都可以实现模拟登陆，模拟登陆的技术点不是特别难，这里记录一下利用 Node 碰到的一些坑，以及一些我自己的解
如何让DIV水平垂直居中
css中怎么设置div背景颜色
nodejs怎么查看版本
html如何设置按钮文字
html如何设置div的透明度
JavaScript对象(详细)
html5 mui怎么使用