继续FormDate学习：

使用Key/Value对和FormData能够轻易地通过XMLHttpRequest指定要传递什么数据，它是一个非常强大的发送数据到服务器的方法。然而，似乎很多人都忽略了这个闪光点，所以，我认为我要在这里指出。

基础

通常的方法是你创建一个 FormData 对象。然后你使用append方法来加入任何额外的key和他们的值。就像这样：

var form = new FormData();
form.append("myName", "Robert");

然后你只需使用XMLHttpRequest（XHR）的send方法来发送：

var xhrForm = new XMLHttpRequest();
xhrForm.open("POST", "getfile.php");
xhrForm.send(form);

对于FormData，有趣的是不限制你加入字符串，但是实际上还有许多不同的类型：字符串、数字（发送的时候会转换为字符串）、文件、二进制对象（BLOB）。

要想能够在服务器端处理一个FormData的表单，要知道的重点是和一个multipart/form-data编码的常规表单一样发送。

加入文件和二进制对象（blob)

如果你想加入一个文件，最简单的方法是访问通过一个type="file"的输入元素选择的文件：

form.append("theFile", fileInput.files[0]);

加入一个二进制对象(blob)

在发送和接收值方面，使用二进制对象（blob)是十分强大的。一个二进制对象(blob)可以手动通过它的内容或者类型的引用去创建：

form.append("blobbie", new Blob([imgAsBlobRef], {"type": "image/png"}));

创建你的二进制对象（blob）的内容：

你也可以自己穿件一个二进制对象（blob）的内容：

var xmlForBlob = ["Robert"],
    xmlBlob = new Blob(xmlForBlob, {"type" : "text/xml"});
form.append("xmlParts", xmlBlob);

在页面上获取图像和创建二进制对象（blob）

另外，你也可以在页面上通过XHR来获取一个图像然后通过FormData来发送：

// Getting a file through XMLHttpRequest as an arraybuffer and creating a Blob
var rhino = document.querySelector("#rhino");
if (rhino) {
    var xhr = new XMLHttpRequest(),
        blob;
    xhr.open("GET", "rhino.png", true);
    xhr.responseType = "blob";
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            blob = xhr.response;
            var form = new FormData();
            form.append("blobbie", blob);
            
            var xhrForm = new XMLHttpRequest();
            xhrForm.open("POST", "getfile.php");
            xhrForm.send(form);
        }
    };
    // Send XHR
    xhr.send();
}

1、踩了个大坑，任务5时登陆页面到后台管理页面的跳转没有做路由，导致任务9中需要登录状态的接口无法连接，无奈只能重新回去返工，几个文件重叠后报错，angular.module()和.controller(){}前面自定义app申明有冲突，感谢两位首席师兄指导。

2、写好了FormDate部分，接口问题没法测试。

3、修改路由页面其他匹配性。

困难：页面布局整体架构思路比较差，现在想想，确实应该做路由跳转，保证整改网页架构一体。

收获：angular报错模式技能点提升，调试模式技能点提升，FormDate技能学习。

计划：路由调试及完成适配，继续任务9。