blob

犀牛书，22.6.1。

blob基本知识

<input type='file' accept='image/*' multiple onchange='fileinfo(this.files)'>
	<script>
	function fileinfo(files){
		
		for(var i=0; i<files.length; i++){
			var file = files[i];
			console.log(file.name, file.size, file.type, file.lastModifiedDate);
		}
	}
	</script>

input type='file'：type：规定 input 元素的类型；file:定义输入字段和 "浏览"按钮，供文件上传。

accept='image/*'：规定通过文件上传来提交的文件的类型，值是MIME 类型（http://www.cnblogs.com/zhongcj/archive/2008/11/03/1325293.html）；避免使用该属性。应该在服务器端验证文件上传。

multiple 属性规定输入字段可选择多个值，与email 和 file有关。

onchange='fileinfo(this.files)'：this指input元素本身，如何获取这个this？files是一个fileList，是一个file对象的数组，每个file对象是一个blob。

 

file是blob的具体版本，继承了blob的一些方法，也有自己的一些方法。

blob是二进制大对象，arraybuffer是二进制缓冲区。

 

创建：

  <script>  //第一种方法
    var builder = new BolbBuilder();
    builder.append("Hello World!");     //将字符串追加到blob
    var blob = builder.getBlob("text/plain");   //指定blob的MIME类型
  </script>
//第二种方法
var blob = new Blob(["Hello World!"],{type:"text/plain"});  //argu1 blob内容；argu2 对象{type：'mime';endings:'transparent/native(决定内容的数据格式)'}

 slice方法：

    function sliceBlob(blob, start, end, type) {
      type = type || blob.type;
      if (blob.mozSlice) {
          return blob.mozSlice(start, end, type);
      } else if (blob.webkitSlice) {
          return blob.webkitSlice(start, end, type);
      } else {
          throw new Error("This doesn't work!");
      }
    }

如果 mime 类型没有设置，那么新的 Blob 对象的 mime 类型和父级一样。现在应该都支持blob，slice方法都统一了吧。

Blob URL

对获取或创建的blob进行操作

url = createObjectURL(blob);

blob://URL对浏览器存储在内存中的blob的一个简单引用；data://URL会对内容进行编码；file://URL指向本地文件系统中的一个文件。三者都不同。

还有ondragenter 和 ondragleave事件；dataTransfer对象，拖动，放下的文件。

 

读取blob

　　　　 <input type='file' onchange='readfile(this.files[0])'></input>
	<script src='js/jquery-2.1.1.js'></script>
	<script>
	function readfile(f){   //file,也就是要读取的blob
		var reader = new FileReader();   //创建filereader对象
		reader.readAsText(f);
		reader.onload = function(e){    //注册对应的事件处理程序
			var text = reader.result;
			console.log(text);			
		}
		reader.onerror = function(e){   //注册对应的事件处理程序
			console.log('Error', e);
		}
	}	
	</script>

blob URL间接访问blob的内容，FileReader访问blob中的字符。

使用FileReader的步骤：

1、创建实例：new FileReader();

2、注册对应的事件处理程序：load，error，progress。该对象还会触发loadstart，loadend，abort事件。

3、将要读取的blob传入4个方法之一：readAsText(), readAsArrayBuffer(), readAsDataURL(), readAsBinaryString()。也就是把blob转为4种形式（视图）。（blob相当于Arraybuffer，text相当于Int8Array）。readAsText()有第二个参数（编码方式）

FileReader对象的属性：state和result。它与XMLHttpRequest事件的属性和方法都很类似。