HTML5 アップロード API の使用例 (パート 2)_html/css_WEB-ITnose

    上一次写了关于HTML的上传API，XMLHttpRequest2.0的上传方式，以及HTML5中上传之前本地的预览，包括对于图片以及部分信息的预览。这次我们就讲下HTML5中关于上传的一些各种个性化需求的处理，主要包括实时进度条，上传速度的实时显示等。

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);

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';    }}

// 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);}