重庆分公司,新征程启航

为企业提供网站建设、域名注册、服务器等服务

Layui多文件上传进度条

Layui原生upload模块不支持文件上传进度条显示,百度,谷歌找了一下不太适用。后面找到一个别人修改好的JS,替换上去,修改一下页面显示即可使用,一下是部分代码

为湘桥等地区用户提供了全套网页设计制作服务,及湘桥网站建设行业解决方案。主营业务为网站建设、做网站、湘桥网站设计,以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!

HTML:

文件名 大小 上传进度 状态 操作

JS部分:

var files;
    //多文件列表示例
    var demoListView = $('#demoList')
        , uploadListIns = upload.render({
            elem: '#fileList'
            , size: 102400 //限制文件大小,单位 KB
            , exts: 'zip|rar|7z|doc|docx|pdf|txt|xls|ppt|xlsx|pptx|img|jpg|png|gif|bmp|jpeg' //只允许上传压缩文件
            , url: webroot + "/guarantee/upload/uploadFile?userid=123456"
            , accept: 'file'
            , multiple: true
            , auto: false
            , bindAction: '#fileListAction'
            , xhr: xhrOnProgress
            , progress: function (value) {//上传进度回调 value进度值
                element.progress('demoList', value + '%')//设置页面进度条
            }, xhr: function (index, e) {
                var percent = e.loaded / e.total;//计算百分比
                percent = parseFloat(percent.toFixed(2));
                element.progress('progress_' + index + '', percent * 100 + '%');
                console.log("-----" + percent);
            }
            // , data: JSON.stringify(Param)
            , choose: function (obj) {
                var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                //读取本地文件
                obj.preview(function (index, file, result) {
                    var tr = $([''
                        , '' + file.name + ''
                        , '' + (file.size / 1014).toFixed(1) + 'kb'
                        , '
' , '等待上传' , '' , '' , '' , '' , ''].join('')); //单个重传 tr.find('.demo-reload').on('click', function () { obj.upload(index, file); }); //删除 tr.find('.demo-delete').on('click', function () { delete files[index]; //删除对应的文件 tr.remove(); uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值,以免删除后出现同名文件不可选 }); demoListView.append(tr); }); } , before: function (obj) { this.data = { "BUSINESS_ID": BUSINESS_ID, "FLOW_ID": FLOW_ID, "FLOW_NODE_ID": FLOW_NODE_ID, "FILE_TYPE": FILE_TYPE }///携带额外的数据 } , done: function (res, index, upload) { if (res.code == 0) { //上传成功 var tr = demoListView.find('tr#upload-' + index) , tds = tr.children(); tds.eq(3).html('上传成功'); tds.eq(4).html(''); //清空操作 var url = webroot + "/guarantee/itemFile/getItemFileByFlow?FLOW_ID=" + FLOW_ID + "&BUSINESS_ID=" + BUSINESS_ID + "&FLOW_NODE_ID=" + FLOW_NODE_ID + "&FILE_TYPE=" + FILE_TYPE //刷新表格 table.reload('itemFileList', { url: url , where: {} //设定异步数据接口的额外参数 //,height: 300 }); return delete this.files[index]; //删除文件队列已经上传成功的文件 } else if (res.code == -1) { layer.msg(res.msg); } this.error(index, upload); } , error: function (index, upload) { var tr = demoListView.find('tr#upload-' + index) , tds = tr.children(); tds.eq(2).html('上传失败'); tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传 } }) ;

注:还需替换layui的upload模块的upload.js文件

下载地址:http://file.35youth.cn/index.php?share/file&user=1&sid=4VkDTZ8q 提取密码:4st5H

作者:onlooker
来源:三无青年博客br
原文:https://www.35youth.cn/644.html
版权声明:本文为博主原创文章,转载请附上博文链接!


名称栏目:Layui多文件上传进度条
转载来源:http://cqcxhl.com/article/ippgji.html

其他资讯

在线咨询
服务热线
服务热线:028-86922220
TOP