AJAX-3

1.文件上传

文件上传只能使用post进行通讯

1.1 new FormData

new FormData 是HTML5的一个新的表单方法，利用 FormData 对象，我们可以通过 JavaScript用一些键值对来模拟一系列表单控件，我们还可以使用 XMLHttpRequest 的 send() 方法来异步的提交表单。与普通的 Ajax 相比，使用 FormData 的最大优点就是我们可以异步上传二进制文件。

FormData只有一个方法

FormData.append(key,value);

key是后端提供的字段，value是file
formData对象不需要写请求头。
实现步骤：

var of = new FormData();
of.append("file",oFile.file[0]);
ajax.send(oF);

oFile.files[0]中放置了上传文件的详细信息，例如最后修改的时间，名字，大小，类型等等。

1.2 ajax.upload.onprogress

ajax.upload.onprogress 这个事件的作用是监听文件上传的进度，必须添加了这个事件之后才能进行监听，写在open之后和send之前。
事件中的事件对象（ev），显示了上传过程中的细节，例如ev.loaded是目前上传的体积， ev.total是文件的总体积。利用这些内容我们可以做出上传的进度查询

file.onclick = function () {
    span.innerHTML = "";
    up.style.width = 0;
    num.innerHTML = "0%";
};

btn.onclick = function () {
    var ajax = new XMLHttpRequest();
    ajax.open("post","post_file.php",true);
    ajax.upload.onprogress = function (ev) {
        //获取目前上传进度的百分比数值
        var scale = Math.floor((ev.loaded / ev.total)* 100);
        //mTween(up,{"width":scale * 4},200,"linear");、
        //修改进度条的长度
        up.style.width = scale * 4 + "px";
        //修改百分比文本数值
        num.innerHTML =scale + "%";
    };
    var oF = new FormData();
    oF.append("file",file.files[0]);
    ajax.send(oF);
    ajax.onload = function () {
        //显示上传是否成功
        span.innerHTML = JSON.parse(ajax.responseText).msg;
    };
};