# ArrayBuffer Blob 

## ArrayBuffer 

ArrayBuffer JavaScript 

 ES6 ES6 

`ArrayBuffer()`

```javascript
var buffer = new ArrayBuffer(8);
```

`buffer`8

ArrayBuffer `byteLength`

```javascript
var buffer = new ArrayBuffer(8);
buffer.byteLength // 8
```

ArrayBuffer `slice()`0

```javascript
var buf1 = new ArrayBuffer(8);
var buf2 = buf1.slice(0);
```



## Blob 

### 

Blob  Blob  Binary Large Object  ArrayBuffer  ArrayBuffer 

`Blob()`

```javascript
new Blob(array [, options])
```

`Blob``Blob``type` MIME 

```javascript
var htmlFragment = ['hey!'];
var myBlob = new Blob(htmlFragment, {type : 'text/html'});
```

`myBlob``text/html`

Blob  JSON 

```javascript
var obj = { hello: 'world' };
var blob = new Blob([ JSON.stringify(obj) ], {type : 'application/json'});
```

### 

`Blob``size``type`

```javascript
var htmlFragment = ['hey!'];
var myBlob = new Blob(htmlFragment, {type : 'text/html'});

myBlob.size // 32
myBlob.type // "text/html"
```

`Blob``slice``Blob`

```javascript
myBlob.slice(start, end, contentType)
```

`slice`0`size`

### 

```value`

 FileList  File File  Blob `name``lastModifiedDate`

```javascript
// HTML 
// 

function fileinfo(files) {
  for (var i = 0; i < files.length; i++) {
    var f = files[i];
    console.log(
      f.name, // 
      f.size, // Blob 
      f.type, // Blob 
      f.lastModifiedDate // 
    );
  }
}
```

 API `dataTransfer.files`FileList  File 

### 

AJAX `responseType``blob` Blob 

```javascript
function getBlob(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url);
  xhr.responseType = 'blob';
  xhr.onload = function () {
    callback(xhr.response);
  }
  xhr.send(null);
}
```

`xhr.response` Blob 

###  URL

`URL.createObjectURL()` Blob  URL API  URL `blob://` Blob  Blob `data://URL`URL `file://URL`

```javascript
var droptarget = document.getElementById('droptarget');

droptarget.ondrop = function (e) {
  var files = e.dataTransfer.files;
  for (var i = 0; i < files.length; i++) {
    var type = files[i].type;
    if (type.substring(0,6) !== 'image/')
      continue;
    var img = document.createElement('img');
    img.src = URL.createObjectURL(files[i]);
    img.onload = function () {
      this.width = 100;
      document.body.appendChild(this);
      URL.revokeObjectURL(this.src);
    }
  }
}
```

 URL

 Blob URL  URL  Blob 404403Blob URL  GET 200 Blob URL  URL

### 

 Blob `FileReader` Blob 

FileReader  Blob Blob 

- `FileReader.readAsText()` UTF-8
- `FileReader.readAsArrayBuffer()` ArrayBuffer 
- `FileReader.readAsDataURL()` Data URL
- `FileReader.readAsBinaryString()`

`FileReader.readAsText()`

```javascript
// HTML 
//