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();        //添加图片的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: data,            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});//值，类型        }

参考：

页面客户端交互

DataURL与File,Blob,canvas对象之间的互相转换的Javascript

理解DOMString、Document、FormData、Blob、File、ArrayBuffer数据类型

URL.createObjectURL和URL.revokeObjectURL