FormData对象
FF4中增加了一个很有意思的对象，FormData。通常我们提交（使用submit button）时，会把form中的所有表格元素的name与value组成一个queryString，提交到后台。这用jQuery的方法来说，就是serialize。但当我们使用Ajax提交时，这过程就要变成人工的了。因此，FormData对象的出现可以减少我们一些工作量。
想得到一个FormData对象，很简单：
var formdata = new FormData();
但一个空的FormData对象对我们没有意义，因此W3c草案提供了三种方案来获取或修改FormData。
方案1：创建一个空的FormData对象，然后再用append方法逐个添加键值对：
var formdata = new FormData();
formdata.append("name", "司徒正美"); 
formdata.append("blog", "http://www.cnblogs.com/rubylouvre/");
方案2：取得form元素对象，将它作为参数传入FormData对象中！
var formobj =  document.getElementById("form");
var formdata = new FormData(formobj);
方案3：利用form元素对象的getFormData方法生成它！
var formobj =  document.getElementById("form");
var formdata = formobj.getFormData()
注意，formdata是一个不透明的对象，现在暂时只有一个append可以操作，不能通过序列化手段得到其里面的内容，这实在是遗憾。它的用法现在也只有一个，用于增强型的XMLHttpRequest对象的send方法中去！
var formElement = document.getElementById("myFormElement");
formData = formElement.getFormData();
formData.append("serialnumber", serialNumber++);
xhr.send(formData);

1、按照萝卜多官网模式，完成图片保存，预览，进度条，操作打钩等。

2、选择图片后，读取文件属性，上传行显示。

document.getElementById('file').onchange=function () {   //选择图片后，内容改变函数
    var file = document.getElementById('file').files[0];
    document.getElementById('tr2').style.display="table-row"  //上传框显示
    document.getElementById('fileName').innerHTML=(file.name);  //文件名赋值
    document.getElementById('size').innerHTML=(file.size/1024/1024).toFixed(2)+"MB";  //文件大小传参，保存2位小数，单位MB
}

3、点击上传按钮

    function readFile(){   //上传按钮点击函数
      var file = document.getElementById('file').files[0];    //第一个读取文件
      var result = document.getElementById('result');   //预览框
      var reader = new FileReader();  // 新建一个FileReader类型的对象
       。。。。}

4、读取成功函数，预览图地址传参，预览框文字隐藏。

reader.onload = function(e){         //读取成功函数
    result.innerHTML = "<img src='"+this.result+"' />";  //图片地址加入预览框，这里css设置了个最大长宽
    document.getElementById('spanNone').style.display="none"  //图片预览项隐藏

}

5、进度条函数，会循环执行，直至成功。可以添加超时函数。此格式应该都是通用的。

reader.onprogress = function(e){  //进度条函数
    //alert('progress');
    var total = e.total;
    var loaded = e.loaded;
    var progress = document.getElementById('progress');
    progress.value = (loaded/total)*progress.max;
}

6、读取结束函数，不论成功或失败。由于未加超时情况，所以没有写失败函数。

reader.onloadend = function(e){   //加载完成时函数
    if(e.total!=0){ //判定开始上传
           var progress = document.getElementById('progress');
    progress.value = progress.max;
    document.getElementById('span').innerHTML="√";   //确认√
    }
}

困难：进度条默认框无法改变背景色，不知道是不是需要覆盖样式代替。上传到服务器好像需要登录状态，由于登录页到管理页面未使用路由跳转，好像需要cookie支持，知识点还没有涉及需要学习。

收获：掌握上传文件、图片预览等知识点，比较固定，加上是js操作，比较熟悉。

计划：明天继续研究FormData，争取完成任务9。