【javascript】File API slice方法对File文件分割 - 2

上一次我们通过File API 里面的 FileReader类型里的readAsText,readAsDataURL等方法来读取文件File。但是如果一个文件十分大的时候,或者只需要读取部分内容，如(文本文件)，那么我们就可以通过这次介绍的slice方法对文件进行分割成二进制Blob对象。这次我们还是根据上次说的图片上传为例，讲解一下如何分割读取图片的。

一 : 介绍Blob对象
Blob对象自带属性
1.size 表示二进制对象的大小
2.type 表示二进制对象的类型 (如果是File对象分割的,会继承type属性)
3.slice 方法 分割文件

二：介绍blob.slice方法
1. 方法介绍 : blob.slice(); 属于Blob对象的一个方法,而File对象是继承Blob对象的,因此File对象也含有slice方法
2. 参数介绍 : blob.slice(startByte,endByte); 这里需要注意它的参数,第一个参数startByte表示文件起始读取Byte字节,第二个参数则是结束读取字节。这里重点注意一下第二个参数,一开始我以为它是读取的长度,因为是在阅读《javascript高级程序设计》时它的例子介绍用length作为形参。结果我在进行文件分割上传的时候,一直获取不到第二次请求后的数据。
3.返回值 ： newBlob = blob.slice(startByte,endByte); 它返回的仍然是一个Blob类型。

三 : 兼容slice方法

function blobSlice(blob,startByte,endByte){
   

      if(blob.slice){
          return  blob.slice(startByte,endByte);
      }
      // 兼容firefox
      if(blob.mozSlice){
          return  blob.mozSlice(startByte,endByte);
      }
      // 兼容webkit
      if(blob.webkitSlice){
          return  blob.webkitSlice(startByte,endByte);
      }
          return null;
}

四 : 分割文件上传
曾经我有介绍过如何将File对象指定的文件上传到服务器中，其中就是通过了FormData对象封装表单数据,通过Ajax请求进行传输。在这里我也要强调一下,一般的 jQuery库和zepto库是不支持FormData对象.因此我们想要调用它们的方法进行发送是不行的,除非你使用了某某插件。既然这样我们就自己用原生的方法把文件上传至服务器吧。

我们还是借用上次写好的一个生产XMLHttpRequest对象的方法。

function  createXHR(){
   

    if( typeof  XMLHttpRequest != "undefined"){
        return  new XMLHttpRequest();
    }
    if(typeof ActiveXobject == "undefined"){
        throw new Error(" not support ");
    }
    //判断是否为 IE
    if(typeof arguments.callee.activeString != "string"){
        var versions = ["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp3.0","MSXML2.XMLHttp"],
            i,len;

        for (var i = 0;i<versions.length;i++) {
            try{
                    new ActiveXobject(versions[i]);
                    arguments.callee.activeString=versions[i];
                    break;
            }catch(ex){
                //  no action
            }
        };
    }
    return  new ActiveXobject(arguments.callee.activeString);
}

接下来可以去看看上一个关于