Jquery上传文件返回上传进度

2020-03-04  本文已影响0人  rgbRed
//首先封装一个方法 返回一个绑定了监听函数的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();
    }
});
上一篇下一篇

猜你喜欢

热点阅读