HTML5关于上传API的一些使用（中）

    上一次写了关于HTML的上传API，XMLHttpRequest2.0的上传方式，以及HTML5中上传之前本地的预览，包括对于图片以及部分信息的预

览。这次我们就讲下HTML5中关于上传的一些各种个性化需求的处理，主要包括实时进度条，上传速度的实时显示等。

关于上传事件

首先要做到实时进度条这种需求，首先我们需要得到关于上传的各种事件，这些事件大部分都是在XMLHttpRequest这个对象下面：

progress事件：上传进度事件。
load事件：传输成功完成。
abort事件：传输被用户取消。
error事件：传输中出现错误。
loadstart事件：传输开始。
loadEnd事件：传输结束，但是不知道成功还是失败。

其中progress事件分为上传和下载两种情况，上传的时候progress事件实际上是在XMLHttpRequest.upload对象下面，而下载的时候属于XMLHttpRequest对象

关于实时进度条

我们可以在上篇中的方法基础上进行扩展来写实时进度条的方法，

var xhr=new XMLHttpRequest();

var formData=new FormData();

formData.append('name',"Jack");

formData.append('uid',666666);

xhr.open("post",url);

xhr.send(formData);

//上传中

xhr.upload.addEventListener("progress", uploadProgress, false);

//上传成功

xhr.addEventListener("load", uploadComplete, false);

//上传出错

xhr.addEventListener("error", uploadFailed, false);

//上传取消

xhr.addEventListener("abort", uploadCanceled, false);

而上传事件还给我们提供了下面这些数据

total – 文件大小
loaded – 已上传的大小
lengthComputable – 进度是否可计算

通过上面这些事件以及属性就可以很轻易的写出进度条。

function uploadProgress(evt){   //evt 上传事件中返回的数据

    if (evt.lengthComputable) { //判断进度是否可以计算

        var percentComplete = Math.round(evt.loaded * 100 / evt.total); //对进度进行计算并且格式化

        document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';     //输出100%

    }else {

        document.getElementById('progressNumber').innerHTML = 'unable to compute';

    }

}

上面这个方法是直接在某个div中直接显示百分比的数字，假如我们需要做进度条也很简单，可以添加一个标签，默认宽度为0，然后在uploadProgress方法中动态更改标签的宽度，单位为百分比，而值就是percentComplete，这样可以在上传的过程当中得到一个完整的进度条。

而当我们文件上传完毕之后可以在load事件中绑定的uploadComplete方法中去做一些css等UI的修改。

关于实时上传速度的显示

现在进度条有了，可是我们还想知道速度是多少应该怎么办呢。

可以通过计算的方法获取其上传的速度，我们在progress事件中是知道已上传的文件大小的，那我们在uploadProgress方法中没过1秒都去计算一下这一次和上一次的loaded大小就可以知道其每秒的上传速度。从而在页面上实时的更新当前的上传速度了。

代码如下

// currentLoadedBytesb本次上传的数据总量，

// lastLoadedBytes 上一次上传的数据总量

// oldObjUploadBits旧的上传速度

var currentLoadedBytes,lastLoadedBytes,oldObjUploadBits;

timer = setInterval(

    function () {

        var bytesCount = currentLoadedBytes - lastLoadedBytes;

        if (bytesCount !== 0) {

            var speed = ConvertBytesUnit(bytesCount);

            $(obj).html("上传速度：" + speed.number + speed.unit + "/s");

        } else {

            $(obj).html(oldObjUploadBits);

        }

        oldObjUploadBits = $(obj).html();

        lastLoadedBytes = currentLoadedBytes;

    }

, 1000)   

function ConvertBytesUnit(size){

    if (size < 0) size = 0;

    var result = {};

    if (size > 1024 * 1024) {

        result.number = (size / (1024 * 1024)).toFixed(2);

        result.unit = "MB";

    } else if (size > 1024 ) {

        result.number = (size / 1024).toFixed(2);

        result.unit = "KB";

    } else {

        result.number = size.toFixed(2);

        result.unit = "B";

    }

    return (result);

}

通过上面的方法就可以获得每一秒具体的上传速度了。

另外XMLHttpRequest2.0可以实现的功能其实很多，另外还可以实现断点续传，以及分片上传等更高级的功能。我们留在下一篇再来说。