发帖
翼度科技»论坛 › 编程开发 › JavaScript › 查看内容

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

共田八

7

主题

7

帖子

21

积分

新手上路

Rank: 1

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

Blob

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

    1. File
    复制代码
    对象：负责处理那些以文件形式存在的二进制数据，也就是操作本地文件；
    1. FileList
    复制代码
    对象：
    1. File
    复制代码
    对象的网页表单接口；
    1. FileReader
    复制代码
    对象：负责将二进制数据读入内存内容；
    1. URL
    复制代码
    对象：用于对二进制数据生成
    1. URL
    复制代码
    Blob
  1. Blob
复制代码
(Binary Large Object) 对象代表了一段二进制数据，提供了一系列操作接口。其他操作二进制数据的API（比如
  1. File
复制代码
对象），都是建立在
  1. Blob
复制代码
对象基础上的，继承了它的属性和方法。

创建 Blob 类型的对象

生成
  1. Blob
复制代码
对象有两种方法：一种是使用
  1. Blob
复制代码
构造函数，另一种是对现有的
  1. Blob
复制代码
对象使用
  1. slice
复制代码
方法切出一部分。

1. new Blob()
  1. Blob
复制代码
构造函数，接受两个参数。第一个参数是一个包含实际数据的数组，这个数组中的元素可以为
  1. DOMString
复制代码
，或者
  1. ArrayBuffer
复制代码
，第二个参数是数据的类型，这两个参数都不是必需的。
  1. var domstring = '<div>Hello world</div>';
  2. var blob1 = new Blob([domstring], {type: 'text/html'});
  3. var buffer = new ArrayBuffer(8);
  4. var blob2 = new Blob([buffer], {type: 'text/plain'});
复制代码
2. blob.slice()

此方法返回一个新的
  1. Blob
复制代码
对象，包含了原
  1. Blob
复制代码
对象中指定范围内的数据
  1. Blob.slice(start:number, end:number, contentType:string)。start：开始索引，默认为0；end：截取结束索引（不包括end）；contentType：新Blob的MIME类型，默认为空字符串
复制代码
Blob 对象的属性


  • Blob.size:
    1. Blob
    复制代码
    对象中所包含数据的大小（字节）。该属性为只读；
  • Blob.type: 一个字符串，表明该
    1. Blob
    复制代码
    对象所包含数据的
    1. MIME
    复制代码
    类型。如果类型未知，则该值为空字符串。该属性为只读

Blob 应用实例

下面是一个使用XMLHttpRequest对象，将大文件分割上传的例子。
  1. function upload(blobOrFile) {
  2.   let xhr = new XMLHttpRequest();
  3.   xhr.open('post', '/server', true);
  4.   xhr.onload = function(e) {};
  5.   xhr.send(blobOrFile);
  6. }

  8. document.querySelctor('input[type="file"]').addEventListener('change', function() {
  9.   let blob = this.files[0];
  10.   const BYTES_PER_CHUNK = 1024 * 1024; // 1MB chunk size
  11.   const SIZE = blob.size;
  12.   let start = 0;
  13.   let end = BYTES_PER_CHUNK;
  14.   while(start < end) {
  15.     upload(blob.slice(start, end));
  16.     start = end;
  17.     end = start + BYTES_PER_CHUNK;
  18.   }
  19. }, false);
复制代码
File
  1. [code]File
复制代码
接口提供有关文件的信息，并允许网页中的
  1. JavaScript
复制代码
访问其内容。[/code]
  1. File
复制代码
对象可以用来获取某个文件的信息，还可以用来读取这个文件的内容。通常情况下，
  1. File
复制代码
对象是来自用户在一个
  1. <input>
复制代码
元素上选择文件后返回的
  1. FileList
复制代码
对象，也可以是来自由拖放操作生成的
  1. DataTransfer
复制代码
对象。
用户在选择一个或者多个文件后，可以通过
  1. File
复制代码
API访问这些
  1. File
复制代码
对象，这些对象被包含在一个
  1. FileList
复制代码
对象中。所有
  1. type
复制代码
为
  1. file
复制代码
的
  1. input
复制代码
都有一个
  1. files
复制代码
属性，通过
  1. Element.files
复制代码
可以返回
  1. FileList
复制代码
对象。
  1. <body>
  2.     <input type="file" id="fileInput" name="file" multiple="multiple" accept="image/*">
  3.     <script>
  4.         var fileInput = document.querySelector("#fileInput");
  5.         fileInput.addEventListener("change", function (event) {
  6.           // 文件列表对象
  7.           var fileList = this.files;
  8.           // 获取第一个文件
  9.           var file = fileInput.files[0];
  10.           // 文件名
  11.           var filename = file.name;
  12.           // 文件大小
  13.           var filesize = file.size;
  14.           //文件的 MIME 类型，如果分辨不出类型，则为空字符串，该属性只读
  15.           var type = file.type;
  16.           // 文件的上次修改时间，格式为时间戳
  17.           var lastModified = file.lastModified;
  18.           // 文件的上次修改时间，格式为 Date 对象实例
  19.           var lastModifiedDate = file.lastModifiedDate;
  20.         }, false);

  22.         console.log(fileList);
  23.         // 上传了两个文件，FileList {0: File, 1: File, length: 2}
  24.     </script>
  25. </body>
复制代码
File 对象的属性:

  • name：文件名，该属性只读。
  • size：文件大小，单位为字节，该属性只读。
  • type：文件的 MIME 类型，如果分辨不出类型，则为空字符串，该属性只读。
  • lastModified：文件的上次修改时间，格式为时间戳。
  • lastModifiedDate：文件的上次修改时间，格式为 Date 对象实例
File 对象的方法：
File 接口没有定义任何方法，但是它从 Blob 接口继承了以下方法：
  1. Blob.slice([start[, end[, contentType]]])
复制代码
返回一个新的
  1. Blob
复制代码
对象，它包含有源
  1. Blob
复制代码
对象中指定范围内的数据。

FileReader

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

构造函数
  1. 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。这个方法非常容易理解，将文件以文本方式读取，读取的结果即是这个文本文件中的内容。


实际应用

上传图片后直接进行预览，而不用先经过后台。
  1. var input  = document.getElementById("file"); //input file
  2. input.onchange = function(){
  3.     var file = this.files[0];
  4.     if(!!file){
  5.         var reader = new FileReader();
  6.         // 将图片转成DataURL格式
  7.         reader.readAsDataURL(file);
  8.         reader.onload = function(){
  9.             //读取完毕后输出结果
  10.            document.getElementById("file_img").src = reader.result //显示上传的图片
  11.            console.log(reader.result);
  12.         }
  13.     }
  14. }
复制代码
URL


URL.createObjectURL(blob)
  1. //blob参数是一个File对象或者Blob对象.
  2. var objecturl =  window.URL.createObjectURL(blob);
复制代码
上面的代码会对二进制数据生成一个
  1. URL
复制代码
，这个
  1. URL
复制代码
可以放置于任何通常可以放置
  1. URL
复制代码
的地方，比如
  1. img
复制代码
标签的
  1. src
复制代码
属性。需要注意的是，即使是同样的二进制数据，每调用一次
  1. URL.createObjectURL
复制代码
方法，就会得到一个不一样的
  1. URL
复制代码
。
这个 URL 的存在时间，等同于网页的存在时间，一旦网页刷新或卸载，这个 URL 就失效。（File 和 Blob 又何尝不是这样呢）除此之外，也可以手动调用
  1. URL.revokeObjectURL
复制代码
方法，使 URL 失效。

URL.revokeObjectURL(objectURL);

当不再需要这些 URL 对象时，每个对象必须通过调用
  1. URL.revokeObjectURL()
复制代码
方法来释放。浏览器会在文档退出的时候自动释放它们，但是为了获得最佳性能和内存使用状况，你应该在安全的时机主动释放掉它们。
实际应用
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>文件上传</title>
  6.     <script src="./lib/jquery.js"></script>
  7.     <style type="text/css">
  8.         #file{
  9.             display: block;
  10.             width: 400px;
  11.             height: 300px;
  12.             opacity:0;
  13.             margin: -300px 0 0 0;            
  14.         }
  15.         #preview{
  16.             display: block;
  17.             width: 400px;
  18.             height: 300px;
  19.         }
  20.     </style>
  21. </head>
  22. <body>
  23.     <img id="preview" src="" alt="点击上传图片"/>
  24.     <input type="file" id="file" />
  25. </body>
  26. </html>
  27. <script type="text/javascript">
  28.   $('#file').on('change', function(){
  29.     //获取文件列表对象
  30.     var fileList = $('#file')[0].files;
  31.     //创建文件流获取文件地址
  32.     var src = window.URL.createObjectURL(fileList[0]); 　　　　
  33.     //设置图片路径  
  34.     $("#preview").attr("src", src);
  35.     $("#preview").load(function() {
  36.       window.URL.revokeObjectURL(src);
  37.     });
  38. 　});
  39. </script>
复制代码
参考资料

Blob - Web API 接口参考 | MDN
Blob,FileReader全面解析
到此这篇关于JS前端使用Blob和File读取文件的文章就介绍到这了,更多相关js使用Blob和File读取文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/article/266700.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！

上一篇: 详解vuex中的this.$store.dispatch方法

下一篇: vuex中能直接修改state吗

发表于 2023-1-2 12:45:09

举报 回复 使用道具

返回列表 发新帖

Archiver|手机版|小黑屋|翼度科技

Copyright © 2001-2020, Tencent Cloud.　Powered by Discuz! X3.4