js-用于上传的FormData与Blob

本文主要是介绍js-用于上传的FormData与Blob，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

BLOB

BLOB (binary large object)，二进制大对象，是一个可以存储二进制文件的容器。

在计算机中，BLOB常常是数据库中用来存储二进制文件的字段类型。

BLOB是一个大文件，典型的BLOB是一张图片或一个声音文件，由于它们的尺寸，必须使用特殊的方式来处理（例如：上传、下载或者存放到一个数据库）。

构造方法

<script>  var blob = new Blob(["Hello World!"],{type:"text/plain"});  
</script>

第一个参数是将合成 Blob对象的数据数组。作用跟 BlobBuilder的append() 方法相同，类型可为任意的strings,Blobs, 和 ArrayBuffers。

第二个参数是含有属性的将生成的新Blob的对象，这个对象的属性通常有两个：type, 即 MIME type；endings, 值可为 “transparent” (默认) 或者 “native”。

Blob.type
//一个字符串，表明该Blob对象所包含数据的MIME类型

事实上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();//添加图片的blobif (audioBase64Data) {var blobBin = dataURLtoBlob(audioBase64Data);var fileType = blobBin.type.split("/")[1];params.fileType = fileType;formData.append('file', blobBin);}//添加请求参数的blobvar 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/pngconsole.log("arr[0]====" + JSON.stringify(arr[0]));//   "data:image/png;base64"console.log("arr[0].match(/:(.*?);/)====" + arr[0].match(/:(.*?);/));// :image/png;,image/pngconsole.log("arr[0].match(/:(.*?);/)[1]====" + arr[0].match(/:(.*?);/)[1]);//   image/pngvar 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});//值，类型}