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: 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});//值，类型
        }

参考：

页面客户端交互

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

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

URL.createObjectURL和URL.revokeObjectURL

angularjs和jquery前端发送以http请求formdata数据