js-用于上传的FormData与Blob
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
