美文网首页
Jquery上传文件返回上传进度

Jquery上传文件返回上传进度

作者: rgbRed | 来源:发表于2020-03-04 20:34 被阅读0次
    //首先封装一个方法 返回一个绑定了监听函数的XMLHttpRequest对象
    var xhrOnProgress=function(fun) {
        xhrOnProgress.onprogress = fun; //绑定监听
        //使用闭包实现监听绑
        return function() {
            //通过$.ajaxSettings.xhr();获得XMLHttpRequest对象
            var xhr = $.ajaxSettings.xhr();
            //判断监听函数是否为函数
            if (typeof xhrOnProgress.onprogress !== 'function')
                return xhr;
            //如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去
            if (xhrOnProgress.onprogress && xhr.upload) {
                xhr.upload.onprogress = xhrOnProgress.onprogress;
            }
            return xhr;
        }
    }
    
    var data = new FormData();    //创建一个新的表单对象
    var file = $(".file_choose")[0].files[0];    //.file_choose应当为一个上传文件表单
    data.append("data", file);    //将文件存放至表单对象,若有其他需要提交的数据,都可以使用此方法
    
    $.ajax({
        method: 'POST',    //上传方式
        url: "upload_url",    //上传地址
        processData: false,    //让ajax不要序列化data
        contentType: false,    //让ajax不要操作content-type
        data: data,    //上传的数据
        //调用监听函数
        xhr:xhrOnProgress(function(evt){
            var percent = evt.loaded / evt.total * 100;//计算百分比
            if(percent < 99.9){
                percent = "已上传 " + percent.toFixed(2) + "%";
            }else{
                percent = "视频处理中,请稍后...";
            }
            $(".loading .layui-layer-content").text(percent);    //将进度显示在界面
        }),
        success: function (data) {
            $(".loading").hide();
            swal({    //此处使用sweetalert插件
                title: "上传成功",
                type: "success",
                showCancelButton: false,
                confirmButtonColor: "#18A689",
                confirmButtonText: "关闭",
                closeOnConfirm: false
            }, function () {
                    window.location.href="/admin/alist";
            });
        },
        beforeSend: function() {    //发送ajax前,将进度界面显示出来
            $(".shade2").show();
            $(".loading").show();
        }
    });
    

    相关文章

      网友评论

          本文标题:Jquery上传文件返回上传进度

          本文链接:https://www.haomeiwen.com/subject/dapilhtx.html