.NET + layui --进度条问题

进度条失效在这里插入图片描述

首先:要引入对应的js文件和css文件。
其次:监听函数要写!!!

  //上传图片
        layui.use(['upload', 'element', 'layer'], function () {
            var $ = layui.jquery,
                upload = layui.upload,
                element = layui.element,
                layer = layui.layer;

            //创建监听函数
            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;
                }
            };

            //选完文件后不自动上传
            upload.render({
                elem: '#test-upload-change',
                url: '' //这是上传的接口
                    ,
                auto: false,
                accept: 'video',
                xhr: xhrOnProgress,
                progress: function (value) { //上传进度回调 value进度值
                    console.log(value);
                    element.progress('demo', value + '%') //设置页面进度条
                },
                multiple: true
                    // ,allDone: function(obj){ //当文件全部被提交后,才触发
                    //   console.log(obj.total); //得到总文件数
                    //   console.log(obj.successful); //请求成功的文件数
                    //   console.log(obj.aborted); //请求失败的文件数
                    // }
                    ,
                bindAction: '#test-upload-change-action',
                before: function (input) {
                    //返回的参数item,即为当前的input DOM对象
                    layer.load(); //上传loading
                    console.log('文件上传中');
                },
                done: function (res) {
                    console.log(res);
                    layer.closeAll();
                    layer.msg("上传成功");
                }
            });
        });
发布了35 篇原创文章 · 获赞 0 · 访问量 1667

猜你喜欢

转载自blog.csdn.net/weixin_43047070/article/details/100091099