Blob初探

简介

　　Blob在js中意味着二进制大数据。实现该接口的对象有3个属性，分别是type（MIME），size（byte）和

一个切割方法：slice（在大文件分片上传可能用到）。另外，File实现了Blob接口，并且还有额外的属性--name和

lastModify。

　　早起的一些浏览器实现了草案（已废弃）上的BlobBuilder，但是现在的大多浏览器废弃了该对象。目前，创建新的

Blob对象需要使用Blob构造函数，new Blob（array，type）。第一个参数数组中可以包含字符串，ArrayBuffer对象或者

一个Blob对象。

　　现对比这两种方式：

　　

       // 构造函数创建
       var ab = new ArrayBuffer(8);
       var dv = new DataView(ab);
       for(var i=0;i<8;i++) dv.setInt8(i,i);
       var arr = ["yang li is tanGer's husband;",ab];
       var b = new Blob(arr,{type: "application/octet-binary"});
       console.log(b, b.type)        
------------------------------------------------------------------------------
        var bb = new BlobBuilder();
        bb.append("yang li is tanGer's husband;")
        bb.append("\0");
        var ab = new ArrayBuffer(8);
        var dv = new DateView(ab);
        for(var i=0;i<8;i++) dv.setInt8(i,i);
        bb.append(ab);
        var ret = bb.getBlob("x-op\/mytype")
        console.log(ret,ret.type);

　　可以讲blob作为参数，创建Blob URL，它是对内存或者磁盘上Blob对象的一个引用。而Data URL则是

对文件内容进行URL编码，其本身就是数据。另外，在创建Blob URL之后，浏览器便维护URL与内存或者磁盘Blob

之间的映射，Blob对象及时已经没有用处也不会被释放，因为始终有Blob URL在引用。故，需要手动的将Blob URL删除。

　　可通过FileReader对Blob读取，fileReader对象可监听多个事件，比较有用的是onload和onprocess。FileReader读取

Blob数据是异步进行的，可以用4种方式读取，常用的两种分别读取为文本和ArrayBuffer。

　　但是在web Worker中可以同步运行类似的构造方法:FileReaderSync。worker同步运行该方法并不会影响当前的主线程。

　　下面demo实现了一个拖动图片显示的功能：

　　

    <style>
        .active{background: 1px firebrick;}
        .droptarget{border:3px solid royalblue;width:400px;height:400px;margin: auto;float:left;}
    </style>
--------------------------------------------------------------------------
    <div class="droptarget" id="droptarget"></div>
    <div style="float:left;margin-left:20px;" id="show"></div>
--------------------------------------------------------------------------
        var createUrl = URL && URL.createObjectURL ||
                window.webkitURL && window.webkitURL.createObjectURL ||
                window.createObjectURL;
        var revokeUrl = URL && URL.revokeObjectURL ||
                window.webkitURL && window.webkitURL.revokeObjectURL ||
                window.revokeObjectURL;
        function $(id){return document.getElementById(id)}

        $("droptarget").ondragenter = function(e){
            var dt = e.dataTransfer;
            //过滤文件
            if(dt.types && dt.types.indexOf("Files") != -1){
                this.classList.add("active");
            }
            return false;
        }
        $("droptarget").ondragleave = function(e){
            this.classList.remove("active");
        };
        $("droptarget").ondragover = function(e){
            return false;
        }
        $("droptarget").ondrop = function(e){
            e.preventDefault();
            var dt = e.dataTransfer;
            var files,i,len,f;
            var img,show = $("show");
            files = dt.files;
            for(i=0,len=files.length;i<len;i++){
                f = files[i];
                if(f.type.indexOf("image/") == -1) return;
                img = new Image();
                img.style.width = "400px";
                img.src = createUrl(f);
                img.onload = function(e){
                    show.innerHTML = "";
                    show.appendChild(img);
                    revokeUrl(img.src);  // 手动删除Blob URL
                }
            }
            this.classList.remove("active")
            return false;
        }

        // 可以使用FileReader异步对Blob对象的数据进行修改
        function read(blob){
            var r = new FileReader();
            r.readAsText(blob); // 异步读取
            r.onload = function(e){
                var d = r.result;
            }
            r.onerror = function(e){
                console.log("error happens...")
            }
            r.onprogress = function(e){
                $("droptarget").innerText = e.loaded + "/" + e.total;
            }
        }