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

1.File

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

这个对象是一个特殊的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对象。

具体代码如下:

                    var reader = new FileReader();
                    reader.onload = function (ev) {
                        //[ev.target.result === reader.result]
                        var text = reader.result;
                        var dataView = new DataView(ev.target.result);
                        // var byteArr = new Int8Array(ev.target.result);
 
                        console.log(new Int8Array(ev.target.result));
                        dataView.setInt32(0, 0);
                        console.log(dataView.buffer.slice(4));
                    };
                    // reader.readAsDataURL(files[key].slice(100, 230));
                    reader.readAsArrayBuffer(files[key].slice(100, 230));

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

 

3.Blob

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

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

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

var blob = new Blob(["Hello World"]);
 
var a = document.createElement("a");
a.href = window.URL.createObjectURL(blob);
a.download = "hello-world.txt";
a.textContent = "Download Hello World!";
 
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就可以直接编辑二进制数据了：

var ab = new ArrayBuffer(32)
var iA = new Int8Array(ab)
iA[0] = 97
var blob = new Blob([iA], {type: "application/octet-binary"});
var fr = new FileReader();
fr.addEventListener("load", function(ev) {
    var abb = ev.target.result;
    var iAA = new Int8Array(abb);
    console.log(iAA);
});
//把blob文件转化为arraybuffer；
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对象，在网页插入图片的例子。

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

本机视频预览的例子。

var video = document.getElementById('video');
var obj_url = window.URL.createObjectURL(blob);
video.src = obj_url;
video.play()
window.URL.revokeObjectURL(obj_url);