Ajax上传文件（视频），并获取上传进度、上传速度和剩余时间。

1.Ajax上传文件

如果动态上传文件并获取信息，则需使用Ajax上传。

html代码：

<form id="fileUpload" enctype="multipart/form-data">
    <input type="file" name="file">选择文件
</form>
<input  id="submit" type="button" value="确认上传" />

Js代码：

 $("#submit").click(function () {
        var formData = new FormData(document.getElementById("fileUpload"));
        $.ajax({
            type: "POST",
            url: "/upload",
            data: formData,
            processData: false,
            contentType: false,
            error: function (data) {
				console.log("上传失败！")
            },
            success: function (data) {
				console.log("上传成功！")
            },
        });
    });

注意：我们可以使用FormData来组合表单中的数据

• 如果是普通数据，则组合为&name=value的形式。
• 如果是文件数据，则会生成相应的文件流进行上传

2.上传过程中获取信息

在文件上传过程中，我们可以通过对ajax的xhr属性注册回调事件的方法来获取上传信息。

Js代码：

 $("#submit").click(function () {
        var formData = new FormData(document.getElementById("fileUpload"));
        $.ajax({
            type: "POST",
            url: "/upload",
            data: formData,
            processData: false,
            contentType: false,
            error: function (data) {
				console.log("上传失败！")
            },
            success: function (data) {
				console.log("上传成功！")
            },
            xhr: function () {
                //获取xhr对象
                var xhr = $.ajaxSettings.xhr();
                //检查是否在上传文件
                if (xhr.upload) {
                    //绑定progress事件的回调函数
                    xhr.upload.addEventListener('progress', progressHandle, false);
                }
                //xhr对象返回给jQuery使用
                return xhr; 
            }
        });
    });

 function progressHandle(event) {
 	console.log("总大小："+ event.total + "  已上传：" + event.loaded);
 }

通过xhr.upload.addEventListener(‘progress’, progressHandle, false)方法我们
就可以获取到相应的数据：

• 其中event.total为文件的总大小，单位为：“b”
• 其中event.loaded为已上传的大小，单位为：“b”

3.计算进度，速度，剩余时间

progressHandle(event)回调在每次文件上传信息变化后都会自动执行，我们只需要根据信息计算相应的结果即可。

Js代码：

	var lastTime = 0;//上一次计算时间
    var lastSize = 0;//上一次计算的文件大小

    function progressHandle(event) {

        /*计算间隔*/
        var nowTime = new Date().getTime();
        var intervalTime = (nowTime - lastTime)/1000;//时间单位为毫秒，需转化为秒
        var intervalSize = event.loaded - lastSize;

        /*重新赋值以便于下次计算*/
        lastTime = nowTime;
        lastSize = event.loaded;

        /*计算速度*/
        var speed = intervalSize/intervalTime;
        var bSpeed = speed;//保存以b/s为单位的速度值，方便计算剩余时间
        var units = 'b/s';//单位名称
        if(speed/1024>1){
            speed = speed/1024;
            units = 'k/s';
        }
        if(speed/1024>1){
            speed = speed/1024;
            units = 'M/s';
        }

        /*计算剩余时间*/
        var leftTime = ((event.total - event.loaded) / bSpeed);

        /*计算进度*/
        var progress = event.loaded/event.total * 100;

        console.log("当前进度：" + progress.toFixed(1) + "%    当前速度：" + speed.toFixed(1) + units +"   预计剩余时间：" + leftTime.toFixed(1) + "秒");
    }

因为没有初始化赋值，所以第一次获取的数据有些问题，有需要的话可以通过赋初值的方法进行修正，或者直接跳过错误值！

Js代码：

function progressHandle(event) {

        /*验证数据*/
        if(lastTime == 0)
        {
            lastTime = new Date().getTime();
            lastSize = event.loaded;
            return;
        }

        /*计算间隔*/
        var nowTime = new Date().getTime();
        var intervalTime = (nowTime - lastTime)/1000;//时间单位为毫秒，需转化为秒
        var intervalSize = event.loaded - lastSize;

        /*重新赋值以便于下次计算*/
        lastTime = nowTime;
        lastSize = event.loaded;


        /*计算速度*/
        var speed = intervalSize/intervalTime;
        var bSpeed = speed;//保存以b/s为单位的速度值，方便计算剩余时间
        var units = 'b/s';//单位名称
        if(speed/1024>1){
            speed = speed/1024;
            units = 'k/s';
        }
        if(speed/1024>1){
            speed = speed/1024;
            units = 'M/s';
        }

        /*计算剩余时间*/
        var leftTime = ((event.total - event.loaded) / bSpeed);

        /*计算进度*/
        var progress = event.loaded/event.total * 100;

        console.log("当前进度：" + progress.toFixed(1) + "%    当前速度：" + speed.toFixed(1) + units +"   预计剩余时间：" + leftTime.toFixed(1) + "秒");
    }

功能点全部完成！