zoukankan      html  css  js  c++  java
  • 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可以实现的功能其实很多,另外还可以实现断点续传,以及分片上传等更高级的功能。我们留在下一篇再来说。

  • 相关阅读:
    内存、时间复杂度、CPU/GPU以及运行时间
    内存、时间复杂度、CPU/GPU以及运行时间
    四叉树问题
    四叉树问题
    基于深度学习的人脸识别系统(Caffe+OpenCV+Dlib)【三】VGG网络进行特征提取
    爬楼梯问题种种
    爬楼梯问题种种
    Python 在线笔试
    基于深度学习的人脸识别系统(Caffe+OpenCV+Dlib)【二】人脸预处理
    标准模板库 STL 使用之 —— vector 使用 tricks
  • 原文地址:https://www.cnblogs.com/wangfajing/p/7202103.html
Copyright © 2011-2022 走看看