Blob初探

时间:2022-05-04
本文章向大家介绍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("");
        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;
            }
        }