BLOB
BLOB (binary large object)，二進制大對象，是一個可以存儲二進制文件的容器。
在計算機中，BLOB常常是數據庫中用來存儲二進制文件的字段類型。
BLOB是一個大文件，典型的BLOB是一張圖片或一個聲音文件，由於它們的尺寸，必須使用特殊的方式來處理（例如：上傳、下載或者存放到一個數據庫）。
構造方法
<script>
var blob = new Blob(["Hello World!"],{type:"text/plain"});
</script>
1
2
3
4
第一個參數是將合成 Blob對象的數據數組。作用跟 BlobBuilder的append() 方法相同，類型可為 任意的strings,Blobs, 和 ArrayBuffers。
第二個參數是含有屬性的將生成的新Blob的對象，這個對象的屬性通常有兩個：type, 即 MIME type；endings, 值可為 “transparent” (默認) 或者 “native”。
Blob.type
//一個字符串，表明該Blob對象所包含數據的MIME類型
1
2
事實上File對象是Blob的特殊類型。即大塊的二進制數據，File對象的尺寸及類型等屬性都繼承自Blob。
FormData
XMLHttpRequest Level 2添加了一個新的接口FormData. 利用FormData對象，我們可以通過JavaScript用一些鍵值對來模擬一系列表單控件，我們還可以使用XMLHttpRequest的send()方法來異步的提交這個”表單”。比起普通的ajax, 使用FormData的最大優點就是我們可以異步上傳一個二進制文件。
以上為官方口吻的解釋，略抽象。我們應該都用過jQuery，其中有個方法叫做serialize(), 作用就是表單序列化，也就是以查詢字符串形式獲得類表單post/get的數據給Ajax請求，例如：userid=123&username=zxx.
FormData對象的作用就類似於這里的serialize()方法，不過FormData是瀏覽器原生的，且支持二進制文件
function sentComment() {
var url = $("#albumItemCommentURL").val();
var params = {"mediaType": 3};
var audioBase64Data = $("#audioBase64Data").attr("src");
//獲取圖片的base64
//創建formData對象
var formData = new FormData();
//添加圖片的blob
if (audioBase64Data) {
var blobBin = dataURLtoBlob(audioBase64Data);
var fileType = blobBin.type.split("/")[1];
params.fileType = fileType;
formData.append('file', blobBin);
}
//添加請求參數的blob
var dataWithType = new Blob([JSON.stringify(params)], {
type: "application/json"
});
formData.append("data", dataWithType);
//上傳數據
$.ajax({
url: url,
type: 'post',
processData: false,
contentType: false,
data: formData,
dataType: 'json',
success: function (data) {
var obj = eval(data);
if (obj.responseCode == '0') {
}
},
error: function (jqXHR, textStatus, errorThrown) {
alert(textStatus + "---" + errorThrown);
}
});
}
/* 工具方法：dataURL(base64字符串)轉換為Blob對象（二進制大對象） */
//data:image/png;base64,iVBORw0KGgoAAAANSUhEUg......
function dataURLtoBlob(dataurl) {
var arr = dataurl.split(',');
var mime = arr[0].match(/:(.*?);/)[1];// 結果： image/png
console.log("arr[0]====" + JSON.stringify(arr[0]));// "data:image/png;base64"
console.log("arr[0].match(/:(.*?);/)====" + arr[0].match(/:(.*?);/));// :image/png;,image/png
console.log("arr[0].match(/:(.*?);/)[1]====" + arr[0].match(/:(.*?);/)[1]);// image/png
var bstr = atob(arr[1].replace(/\s/g, ''));
var n = bstr.length;
var u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {type: mime});//值，類型
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
參考：
頁面客戶端交互
DataURL與File,Blob,canvas對象之間的互相轉換的Javascript
理解DOMString、Document、FormData、Blob、File、ArrayBuffer數據類型
URL.createObjectURL和URL.revokeObjectURL
angularjs和jquery前端發送以http請求formdata數據
————————————————
版權聲明：本文為CSDN博主「Mars-xq」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/sinat_31057219/article/details/70243451