当前位置:   article > 正文

JS中的File, FileReader, Blob, ArrayBuffer, TypedArray, DataView, URL用法_bolb转dataview

bolb转dataview

1.File

  1. var file2 = new File(['数据数组, 可以使用File, Blob, ArrayBuffer类型'],"文件名称",{
  2. //[文件类型]
  3. type:'text/plain'
  4. })

这个对象是一个特殊的Blob, 可以使用Blob里面的方法, 上面是它的构造方法及如何创建一个File对象, 但是一般不会使用new的方式创建, 而是使用input来获取此对象, 用于文件上传, 此对象最常用的方法就是slice(start, end)用于切割成若干Blob对象以便实现断点续传功能.

 

2.FileReader

这个对象就比较重要了, 它的功能包括一下几种:

(1)readAsBinaryString(Blob|File):返回二进制字符串,该字符串每个字节包含一个0到255之间的整数。
(2)readAsText(Blob|File, opt_encoding):返回文本字符串。默认情况下,文本编码格式是’UTF-8’,可以通过可选的格式参数,指定其他编码格式的文本。
(3)readAsDataURL(Blob|File):返回一个基于Base64编码的data-uri对象。
(4)readAsArrayBuffer(Blob|File):返回一个ArrayBuffer对象。

具体代码如下:

  1. var reader = new FileReader();
  2. reader.onload = function (ev) {
  3. //[ev.target.result === reader.result]
  4. var text = reader.result;
  5. var dataView = new DataView(ev.target.result);
  6. // var byteArr = new Int8Array(ev.target.result);
  7. console.log(new Int8Array(ev.target.result));
  8. dataView.setInt32(0, 0);
  9. console.log(dataView.buffer.slice(4));
  10. };
  11. // reader.readAsDataURL(files[key].slice(100, 230));
  12. reader.readAsArrayBuffer(files[key].slice(100, 230));

其中DataView和Int8Array是对二进制的操作, 具体使用下面会说到.

 

3.Blob

此对象就是一个二进制的容器, 可读不可写, Blob构造函数,接受两个参数。第一个参数是一个包含实际数据的数组,第二个参数是数据的类型,这两个参数都不是必需的。

  1. var htmlParts = ["<a id=\"a\"><b id=\"b\">hey!<\/b><\/a>"];
  2. var myBlob = new Blob(htmlParts, { "type" : "text\/xml" });

下面是一个利用Blob对象,生成可下载文件的例子。

  1. var blob = new Blob(["Hello World"]);
  2. var a = document.createElement("a");
  3. a.href = window.URL.createObjectURL(blob);
  4. a.download = "hello-world.txt";
  5. a.textContent = "Download Hello World!";
  6. body.appendChild(a);

上面的代码生成了一个超级链接,点击后提示下载文本文件hello-world.txt,文件内容为“Hello World”。

Blob对象的slice方法,将二进制数据按照字节分块,返回一个新的Blob对象, File对象就是继承的此方法。

var newBlob = oldBlob.slice(startingByte, endindByte);

 

4.ArrayBuffer

ES6提供了, ArrayBuffer和TypedArray, 让前端也可以直接操作编辑二进制数据, 网页中的类型为file的input标签, 也可以通过FileReader转化为二进制, 然后再做编辑等

  ArrayBuffer : 代表内存之中的一段二进制数据, 通过它我们可以直接创建二进制对象,然后使用相关的方法和属性。

  如何使用ArrayBuffer:

  new ArrayBuffer(32), 从内存中申请32个字节;

详情查看这里

 

5.TypedArray

如果要把blob文件转化为二进制的数据的话,要先把blob转化为arraybuffer,然后再使用typedArray就可以直接编辑二进制数据了:

  1. var ab = new ArrayBuffer(32)
  2. var iA = new Int8Array(ab)
  3. iA[0] = 97
  4. var blob = new Blob([iA], {type: "application/octet-binary"});
  5. var fr = new FileReader();
  6. fr.addEventListener("load", function(ev) {
  7. var abb = ev.target.result;
  8. var iAA = new Int8Array(abb);
  9. console.log(iAA);
  10. });
  11. //把blob文件转化为arraybuffer;
  12. fr.readAsArrayBuffer(blob)

详情点击这里

 

6.DataView

查看详情

个人觉得这个对于服务端发来的二进制数据处理比较好, 比如可以读取头4字节以判明指令需要执行哪些操作

 

7.URL

URL对象用于生成指向File对象或Blob对象的URL。

var objecturl =  window.URL.createObjectURL(blob);

上面的代码会对二进制数据生成一个URL,类似于“blob:http%3A//test.com/666e6730-f45c-47c1-8012-ccc706f17191”。这个URL可以放置于任何通常可以放置URL的地方,比如img标签的src属性。需要注意的是,即使是同样的二进制数据,每调用一次URL.createObjectURL方法,就会得到一个不一样的URL。

这个URL的存在时间,等同于网页的存在时间,一旦网页刷新或卸载,这个URL就失效。除此之外,也可以手动调用URL.revokeObjectURL方法,使URL失效。

window.URL.revokeObjectURL(objectURL);

下面是一个利用URL对象,在网页插入图片的例子。

  1. var img = document.createElement("img");
  2. img.src = window.URL.createObjectURL(files[0]);
  3. img.height = 60;
  4. img.onload = function(e) {
  5. window.URL.revokeObjectURL(this.src);
  6. }
  7. body.appendChild(img);
  8. var info = document.createElement("span");
  9. info.innerHTML = files[i].name + ": " + files[i].size + " bytes";
  10. document.querySelector('body').appendChild(info);

本机视频预览的例子。

  1. var video = document.getElementById('video');
  2. var obj_url = window.URL.createObjectURL(blob);
  3. video.src = obj_url;
  4. video.play()
  5. window.URL.revokeObjectURL(obj_url);
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/145070
推荐阅读
相关标签
  

闽ICP备14008679号