视屏上传带进度条显示

最新推荐文章于 2019-11-15 11:42:10 发布

Zyl_CN

最新推荐文章于 2019-11-15 11:42:10 发布

阅读量509

点赞数

分类专栏： JQuery 小练习

本文链接：https://blog.csdn.net/Zyl_CN/article/details/85316697

版权

小练习同时被 2 个专栏收录

32 篇文章 2 订阅

订阅专栏

JQuery

6 篇文章 0 订阅

订阅专栏

// 上传视频的删除按钮
    var stopAjax=''
    $('.typeVideoBox>p>a').on('click',function () {
       stopAjax.abort(); //停止ajax上传
    })

// 上传视频实时进度
    $('.typeVideoBox>label>input[type=file]').on('change',function () {
        var videoUrl=$(this).val();
        var urlType=videoUrl.substring(videoUrl.lastIndexOf(".")).toLowerCase();
        if(!urlType.match(/.mp4|.flv|.avi|.rmvb|.wmv|.mov|.mkv|.rm|.mpg|.webm|.mpeg4|.ts/)){
            alert('上传错误,视屏格式必须为：mp4/flv/avi/rmvb/wmv/mov/mkv/rm/mpg/webm/mpeg4/ts')
        }else{
            $('.typeVideoBox>p>span').html($(this).val().slice($(this).val().lastIndexOf("\\")+1)) //视频名
            ajaxUploadingFn()
        }
    })
// 上传实时信息函数
    function onprogress(evt){
        var loaded = evt.loaded;     //已经上传大小情况
        var tot = evt.total;      //附件总大小
        var per = Math.floor(100*loaded/tot);  //已经上传的百分比
        $('.typeVideoBox>p>b>span').html(per +"%")
        $('.typeVideoBox>p>b>i').css("width" , per +"%");
    }
    // 上传视频的ajax函数执行
    function ajaxUploadingFn() {
        var videoText=new FormData();
        videoText.append("file" , $(".typeVideoBox>label>input[type=file]").get(0).files[0]);
        stopAjax=$.ajax({
            url:urlStr+'upvideo',
            type:'post',
            dataType:'json',
            data:videoText,
            processData : false,
            contentType : false ,
            xhr: function(){
                var xhr = $.ajaxSettings.xhr();
                if(onprogress && xhr.upload) {
                    xhr.upload.addEventListener("progress" , onprogress, false);
                    return xhr;
                }
            },
            success:function (data) {
                if(data.code==1){
                   XXXXX
                }
            }
        })
     }