JavaScript对二进制文件操作之Blob对象

文件操作一直是早期浏览器的痛点，全封闭式，不给JS操作的空间，而随着H5一系列新接口的推出，这个壁垒被打破。对，是一系列接口，以下会涉及到如下概念：Blob、File、FileReader、ArrayBuffer、ArrayBufferView、DataURL等，其他如FormData、XMLHttpRequest、Canvas等暂不深入。

在介绍FileReader对象之前，我们先了解一下Blob对象

Blob(Binary Large Object)术语最初来自数据库（oracle 中也有类似的栏位类型。），早期数据库因为要存储声音、图片、以及可执行程序等二进制数据对象所以给该类对象取名为Blob。 

 在Web领域，Blob被定义为包含只读数据的类文件对象。Blob中的数据不一定是Javascript原生数据形式。

在这里我简介的是Javascript的对象类型---Blob，Blob对象除了存放二进制数据外还可以设置这个数据的MINE类型，这相当于对文件的储存，其它很多二进制对象也是从这个对象继承的，而File接口就是继承Blob，并进行扩展。

【1】简单创建blob对象

//size:大小 type：MIME类型

var blob = new Blob(["Hello world!"],{type:"text/plain"});

 console.log(blob);

【2】Blob对象读取二进制文件并且对路径加密

  <audio src="" id="music"   controls="controls" ></audio>

//注意ajax不可以接受二进制数据类型，XMLHttpRequest对象可以

//使用 XMLHttpRequest 对象获取播放音乐url的Blob值

      function faResponseson(musics,songer,ID,musicRecordID){

          var src="${ctx}/web/MusicRecordServlet?method=selectfileUrl&type=audio"

          +"&musicRecordID="+musicRecordID;

          //【1】创建XMLHttpRequest对象

           var xhr = new XMLHttpRequest();

        //【2】配置请求方式、请求地址以及是否同步

        //XMLHttpRequest必须使用异步模式，同步模式不能设置 responseType = "blob"

            xhr.open('POST', src, true);

            /【3】/设置请求结果类型为blob

            xhr.responseType = 'blob';

            //【4】请求成功回调函数

            xhr.onload = function(e) {

              if (this.status == 200) {//请求成功

              //【5】获取blob对象

               var blob = this.response;

console.log(blob);

var music=document.getElementById("music");

        //【6】获取blob对象地址，并把值赋给容器

       //URL.createObjectURL(blob)是生成的对象URL.通过这个URL,可以获取到所指定文件的完整内容.

              music.src=URL.createObjectURL(blob);

              pauseToplay();

              music.play();

             $("#ID").val(ID);

             $("#musicinfor").text(songer+" - "+musics);

            }

        };

    xhr.send();

   }

1）Blob对象

2）Blob对象对url加密

【3】其他

我们开发对一些图片、音频、视频等这些二进制类型的数据进行处理、显示时，那么Blob对象就显得非常注意，并且我们也不希望文件的路径暴露出去，可以会被别人通过路径，将文件截取。而且Blob对象进行媒体播放非常方便