XMLHttpRequest 1.0

1.0 中xmlhttpRequest有2个重要的返回属性，reposeText,reposeXml。下面的数据类型都是2.0新增的

FormData对象

我们应该都用过jQuery，其中有个方法叫做serialize(), 作用就是表单序列化，也就是以查询字符串形式获得类表单post/get的数据给Ajax请求，例如：userid=123&username=zxx.

FormData对象的作用就类似于这里的serialize()方法，不过FormData是浏览器原生的，且支持二进制文件

实际使用是作为构造函数，如下：

new FormData ([可选]HTMLFormElement)

HTMLFormElement这个参数可选，可有可无。表示form表单元素，就是我们要序列化，要提交的那个表单元素。

var newFormData = new FormData(someFormElement);

newFormData就是someFormElement这个表单元素中所有键值对数据了。

Ajax send formData 的时候 Content-type 应该默认成multipart

<script>

    var form=new FormData();

    form.append("key","3333");

    var xhttp=new XMLHttpRequest();

    xhttp.open("POST","http://localhost:3000/",false);

    xhttp.onreadystatechange=function () {

        if(xhttp.readyState==4){

            if(xhttp.status==200){

                console.log(xhttp.responseText);

            }

            else{

                console.log(xhttp.status,xhttp.statusText);

            }

        }

    }

    console.log(form.toString()); //[Object FormData]

    // Content-type 应该默认成multipart，如果不设置默认是multipart. vue-resoure 插件，处理formdata： 如果发生data 是formData 类型就直接删除了 content-type

    // xhttp.setRequestHeader("Content-type","application/x-www-four-urlencoded");

    xhttp.send(form);

    </script>

FormData对象还有一个方法，为append()方法，可以人为的给当前FormData对象添加一个键/值对。

语法如下：

void append(DOMString 键, Blob 值, [可选] DOMString 文件名);

void append(DOMString 键, DOMString 值);
Blob 这是用来表示二进制文件的，后面的文件名可选，据说，如果缺省，且传输的是Blob对象，则会使用"blob"代替。

Blob数据对象

一个Blob对象就是一个包含有只读原始数据的类文件对象。Blob对象中的数据并不一定得是JavaScript中的原生形式。File接口基于Blob, 继承了Blob的功能，并且扩展支持了用户计算机上的本地文件。

创建Blob对象的方法有几种，可以调用Blob构造函数，还可以使用一个已有Blob对象上的slice()方法切出另一个Blob对象，还可以调用canvas对象上的toBlob方法。

举个例子，使用Blob从服务器上GET某个图片：

var xhr = new XMLHttpRequest();

xhr.open("get", "mm1.jpg", true);

xhr.responseType = "blob";

xhr.onload = function() {

    if (this.status == 200) {

        var blob = this.response;  // this.response也就是请求的返回就是Blob对象

        var img = document.createElement("img");

        img.onload = function(e) {

          window.URL.revokeObjectURL(img.src); // 清除释放

        };

        img.src = window.URL.createObjectURL(blob);

        eleAppend.appendChild(img);

    }

}

xhr.send();

 Blob对象有两个属性:

　　1.size:Blob对象中所包含数据的大小。字节为单位。 只读。

　　2.一个字符串，表明该Blob对象所包含数据的MIME类型。例如，上demo图片MIME类似就是”image/jpeg“. 如果类型未知，则该值为空字符串。 只读。

构造函数：

Blob也有一个构造函数用法。语法如下：

Blob Blob(

  [可选] Array parts,

  [可选] BlobPropertyBag properties

);

其中，两个参数的含义是：

parts
一个数组，包含了将要添加到Blob对象中的数据。数组元素可以是任意多个的ArrayBuffer, ArrayBufferView(typed array), Blob, 或者DOMString对象。
properties
一个对象，设置Blob对象的一些属性。目前仅支持一个type属性，表示Blob的类型

方法

Blob对象有个很重要的方法-slice()，作用是，可以实现文件的分割

Blob slice(

  [可选] long long start,

  [可选] long long end,

  [可选] DOMString contentType

};

start开始索引，可以为负数，语法类似于数组的slice方法。默认值为0.end结束索引，可以为负数，语法类似于数组的slice方法。默认值为最后一个索引。contentType新的Blob对象的MIME类型，这个值将会成为新的Blob对象的type属性的值，默认为一个空字符串。

显然，此方法返回的数据格式还是Blob对象，不过是指定范围复制的新的Blob对象。注意，如果start参数的值比源Blob对象的size属性值还大，则返回的Blob对象的size值为0，也就是不包含任何数据。

File对象

表示我们使用file控件(<input type="file">)选择的对象，或者是使用拖拽操作搞出的DataTransfer对象。

这里的File对象也是二进制对象，因此，从属于Blob对象，Blob对象的一些属性与方法，File对象同样适合，且推荐使用Blob对象的属性与方法。

属性

File.lastModifiedDate[只读]
文件对象最后修改的日期
File.name[只读]
文件对象的名称

Blob.size[只读]

　　Blob对象包含数据的字节大小

Blob.type[只读]

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

<script>

 function change(file){

     console.dir(file.files[0]);

 }

</script>

<body>

    <input type="file" onchange="change(this)">

</body>

ArrayBuffer对象

ArrayBuffer表示二进制数据的原始缓冲区，该缓冲区用于存储各种类型化数组的数据。

ArrayBuffer是二进制数据通用的固定长度容器。

Blob可以append ArrayBuffer数据，也就是Blob是个更高一级的大分类，类似领导的感觉。ArrayBuffer则是具有某种恶魔果实的尖兵。

下一文章说一下，类型数组typedArray

FormData、Blob、File、ArrayBuffer数据类型的更多相关文章

  1. 理解DOMSTRING、DOCUMENT、FORMDATA、BLOB、FILE、ARRAYBUFFER数据类型

    一.XMLHttpRequest 2.0的家臣们 我大学那会儿,一个称为Ajax的东西对前端行业造成了深远影响,不仅是JS语言,而包括前端地位.职位兴起以及工作分工等.抛开IE6浏览器不谈,其他浏览器 ...

  2. 二进制学习——Blob，ArrayBuffer、File、FileReader和FormData的区别

    前言: Blob.ArrayBuffer.File.fileReader.formData这些名词总是经常看到,知道一点又好像不知道,像是同一个东西好像又不是,总是模模糊糊,最近终于下决心要弄清楚. ...

  3. File、Blob、ArrayBuffer等文件类的对象有什么区别和联系

    前言 在前端中处理文件时会经常遇到File.Blob.ArrayBuffer以及相关的处理方法或方式如FileReader.FormData等等这些名词,对于这些常见而又不常见的名词,我相信大多数人对 ...

  4. 聊聊JS的二进制家族：Blob、ArrayBuffer和Buffer

    事实上,前端很少涉及对二进制数据的处理,但即便如此,我们偶尔总能在角落里看见它们的身影. 今天我们就来聊一聊前端的二进制家族:Blob.ArrayBuffer和Buffer 概述 Blob: 前端的一 ...

  5. 实验long raw 和 blob两种数据类型遇到dblink的表现

    首先long raw从Oracle 10g开始就不再被建议使用,建议用blob代替.同理,long建议用clob代替. 本文从运维角度实验long raw 和 blob两种数据类型在遇到dblink时 ...

  6. js实现图片的Blob base64 ArrayBuffer 的各种转换

    一.相关基础知识 构造函数 FileReader() 返回一个新构造的FileReader 事件处理 FileReader.onabort  处理abort事件.该事件在读取操作被中断时触发. Fil ...

  7. FileReader & Blob & File

    FileReader & Blob & File https://developer.mozilla.org/en-US/docs/Web/API/FileReader https:/ ...

  8. GFS, HDFS, Blob File System架构对比

    分布式文件系统很多,包括GFS,HDFS,淘宝开源的TFS,Tencent用于相册存储的TFS (Tencent FS,为了便于区别,后续称为QFS),以及Facebook Haystack.其中,T ...

  9. 理解前端blob和ArrayBuffer，前端接受文件损坏的问题

    1 downloadTemplate().then(res =>{ 2 3 const data = res.data 4 const url = window.URL.createObject ...

随机推荐

  1. NEC学习 ---- 模块 - 上图下文图文列表

    上图下文图文列表的效果如下图: 可以看到三个红色框中的三中"上图下文的图文列表"; 这里的代码其实没什么问题, 对于这种布局, 其实可以参考我上一篇介绍: NEC学习 ---- 模 ...

  2. maven记录

    1. 跳过测试 mvn  -Dmaven.test.skip=true 2. 依赖树 mvn dependency:tree 3. 生成UTF-8的eclipse工程 构成目录中的.settings文 ...

  3. fiddler实现手机端抓包（代理）

    一.fiddler设置代理 1.打开Fiddler->Tools->Fiddler Options在Connection面板里将 Allow remote computers to con ...

  4. DIA

    Dia Tutorial: http://www.seanet.com/~hgg9140/comp/diatut/all/all.html Dia Tutorial

  5. join用法

    join命令可以将多个文件结合在一起,每个文件里的每条记录,都共享一个键值(key),键值指的是记录中的主字段,通常会是用户名称.个人姓氏.员工编号之类的数据. join - join lines o ...

  6. Eclipse新增Web项目

    [前置条件] 1. 电脑已安装JDK1.6,并成功配置环境变量 2. 电脑已存在tomcat6.0包,无需安装 [操作步骤] 1. 为eclipse配置tomcat6.0 (1)eclipse菜单栏, ...

  7. 关于Thread.IsBackground属性的理解（转载）

    C#中,Thread类有一个IsBackground 的属性.MSDN上对它的解释是:获取或设置一个值,该值指示某个线程是否为后台线程.个人感觉这样的解释等于没有解释. .Net中的线程,可以分为后台 ...

  8. node 的express 如何接受以一个网站的url作为参数的路由

    获取get参数127.0.0.1:3000/index?id=12 ,这种情况下,这种方式是获取客户端get方式传递过来的值,通过使用req.query.id就可以获得,类似于PHP的get方req. ...

  9. tcp protocol number

    在计算机网络OSI模型中,TCP端口完成第四层传输层所指定的功能.我们的电脑与网络连接的许多应用都是通过TCP端口实现的.本文与大家分享部分TCP端口的介绍. 21端口:21端口主要用于FTP(Fil ...

  10. VBA的打开关闭保存另存为等事件无法正常跑的原因

    打开执行的代码需要写在thisworkbook的open事件下!!!!!如下图: VBA中事件分为三种:工作簿事件,工作表事件,窗体.控件事件. 工作簿事件发生在特定的工作簿中,如Open(打开工作簿 ...