.NET + layui --进度条问题

.net MVC 专栏收录该内容
9 篇文章 0 订阅

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

首先:要引入对应的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("上传成功");
                }
            });
        });
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 终极编程指南 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值