ajax 上传文件进度监测

 function uploadVideo(obj)
    {
        $('.progress').css('display','flex');
        var file = $(obj)[0].files[0];
        console.log(file);
        var data = new FormData();
        data.append('mp5',file);
        data.append('name','mp5');
        $.ajax({
            type: 'post',
            url: '{:url("modular/uploadVideo")}',
            dataType: 'json',
            data: data,
            // cache:false,
            contentType: false, //不设置内容类型
            processData: false, //不处理数据
    xhr: function() {
        var xhr = new XMLHttpRequest();
        //使用XMLHttpRequest.upload监听上传过程，注册progress事件，打印回调函数中的event事件
        xhr.upload.addEventListener('progress', function (e) {
            console.log(e);
            //loaded代表上传了多少
            //total代表总数为多少
            var progressRate = parseInt((e.loaded / e.total) * 100) + '%';
            $('.progress').html('已上传'+progressRate)
            console.log(progressRate)
            //通过设置进度条的宽度达到效果
            // $('.progress > div').css('width', progressRate);
        })

        return xhr;
    },
            success: function (data) {
                if(!data.code){
                    $('input[name="file_url"]').val(data.data)
                }else{
                    alert(data.msg);
                }
            }
      })

    }