首页 JQuery/Js Layui多文件上传获取进度回调【原创】
Layui多文件上传获取进度回调【原创】
作者 : tanyi 来源 : 我的笔记 浏览 : 756 次 时间 : 2020-01-06 17:28:19
简述
Layui在最新的2.5.5版本中新增了文件上传进度的回调,这对于上传图片需要制作进度条提供了极大的便利。

默认的回调只针对于单一文件上传,不适用于多文件上传,要支持多文件需要对upload.js做一些简单的修改。首先利用编辑器追踪到upload.js文件(下面这段代码位置),然后开始新增两段代码(有注释的为新增代码)。

layui.each(o, function(e, o) {
                    var r = new FormData;
                    var id=e;//此变量为区分上传单位的id
                    r.append(l.field, o), layui.each(l.data, function(e, t) {
                        t = "function" == typeof t ? t() : t, r.append(e, t)
                    }), t.ajax({
                        url: l.url,
                        type: "post",
                        data: r,
                        contentType: !1,
                        processData: !1,
                        dataType: "json",
                        headers: l.headers || {},
                        success: function(t) {
                            i++, d(e, t), u()
                        },
                        error: function() {
                            n++, a.msg("请求上传接口出现异常"), m(e), u()
                        },
                        xhr: function() {
                            var e = new XMLHttpRequest;
                            return e.upload.addEventListener("progress", function(e) {
                                if (e.lengthComputable) {
                                    e.id=id;//将当前id赋值到e对象,也可新增一参数单独传
                                    /**var k=id;**/单独传
                                    var t = Math.floor(e.loaded / e.total * 100);
                                    "function" == typeof l.progress && l.progress(t, e/*,k*/)
                                }
                            }), e
                        }
                    })
                })

修改完后即可在进度回调函数做对应处理,下面是多文件上传完整代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css"  media="all">
    <!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 -->
</head>
<style>
    .layui-progress-big{width: 500px}
</style>
<body>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>高级应用:制作一个多文件列表</legend>
</fieldset>

<div class="layui-upload">
    <button type="button" class="layui-btn layui-btn-normal" id="testList">选择多文件</button>
    <div class="layui-upload-list">
        <table class="layui-table">
            <thead>
            <tr><th>文件名</th>
                <th>进度</th>
                <th>大小</th>
                <th>状态</th>
                <th>操作</th>
            </tr></thead>
            <tbody id="demoList"></tbody>
        </table>
    </div>
    <button type="button" class="layui-btn" id="testListAction">开始上传</button>
</div>
</body>
<script src="/static/jquery-3.2.1.min.js" charset="utf-8"></script>
<script src="/static/layui/layui.js" charset="utf-8"></script>
<script>
    layui.use(['upload','element'], function(){
        var upload = layui.upload;
        var element = layui.element;
        var aa={};
        //多文件列表示例
        var demoListView = $('#demoList')
            ,uploadListIns = upload.render({
            elem: '#testList'
            ,field:'img'
            ,url: ""
            ,accept: 'file'
            ,multiple: true
            ,auto: false
            ,bindAction: '#testListAction'
            ,choose: function(obj){
                var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                //读取本地文件
                obj.preview(function(index, file, result){
                    var tr = $(['<tr id="upload-'+ index +'">'
                        ,'<td>'+ file.name +'</td>'
                            ,"<td><div class=\"layui-progress layui-progress-big\" lay-showPercent=\"true\" lay-filter='"+index+"'>\n" +
                        "<div class=\"layui-progress-bar layui-bg-blue\" lay-percent='0%' ></div>\n" +
                        "</div></td>"
                        ,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
                        ,'<td>等待上传</td>'
                        ,'<td>'
                        ,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
                        ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
                        ,'</td>'
                        ,'</tr>'].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);
                    element.render();
                });
            }
            ,allDone: function(obj){ //当文件全部被提交后,才触发

            }
            ,progress: function(n,index){
                var percent = n + '%' //获取进度百分比
                element.progress(index.id, percent); //可配合 layui 进度条元素使用
            }
            ,done: function(res, index, upload){
                if(res.code == 0){ //上传成功
                    var tr = demoListView.find('tr#upload-'+ index)
                        ,tds = tr.children();
                    tds.eq(3).html('<span style="color: #5FB878;">上传成功</span>');
                    tds.eq(4).html(''); //清空操作
                    return delete this.files[index]; //删除文件队列已经上传成功的文件
                }
                this.error(index, upload);
            }
            ,error: function(index, upload){
                var tr = demoListView.find('tr#upload-'+ index)
                    ,tds = tr.children();
                tds.eq(3).html('<span style="color: #FF5722;">上传失败</span>');
                tds.eq(4).find('.demo-reload').removeClass('layui-hide'); //显示重传
            }
        });

    });
</script>


上一篇: JS写插件的简单示例【原创】

下一篇: Laydate 绑定按钮【原创】
版权声明:原创文章,转载时请注明原始出处,作者等相关信息。
本文连接:https://ntbk8.cn/index/d-105.html
留言
上传图片
评论列表

96 篇

文章总数

38979 次

浏览总数

94 条

评论总数

昵称 Telkobe
职业 PHP开发
家乡 四川南充
住址 暂居成都
QQ 946188985
文章搜索
热门文章
最新文章
新闻头条

1 “15块4根面”,商家已停业整顿,景区物价就应该“贵上天”?

2 二十岁的智障女性嫁给五十岁的男人,这种婚姻是否有效的?

3 凤梨滞销,台湾名嘴鼓励每人一天吃18公斤,网友:笑喷了!

4 “错换人生28年”姚策母子为何反目,是利益纠葛还是另有隐情?

5 美女在家打造游戏厅 能VR高科技

6 “拉面哥”被众网红逼哭,声称想回归平静质朴的生活

7 失主你在哪儿?每个信封里都有百元大钞

8 两地燃气集团携手 成渝双城“燃”向未来

9 中国南北分界线上的古镇,有一副对联难倒天下客,百年来无人对出

10 暖闻|理发师退休后服务社区老人,收费2元30年未涨

11 上海苏宁将启动“全民焕新家电节” 家电以旧换新补贴最高达5000元

12 这种病一线城市治疗率不足40%,出现走路缓慢、手抖等症状要警惕

13 上海发布住房限售新举措 优先购买的新房满五年后方可转让

14 独居女孩被困浴室后 3000多个孤独的人尝试用智能音箱呼救

15 医院对面的“爱心家园”:为贫困患儿家庭提供免费食宿

16 30年守护:世界濒危鸟类黑嘴鸥在辽宁从千至万

17 最小龄双侧同期人工耳蜗宝宝如今能听会说

18 泰州14岁男孩开学后离家出走,南京铁路民警及时找回

19 咋回事?延庆警察蜀黍收到一束鲜花?

20 前有老人讹人称“良心过得去” 后有老人倒地“被绕路走”?别让好人寒了心!

21 视频|神秘男子“投食”狗狗 公共视频还原作案过程

22 花博会地方花卉展3月下旬举办 园区加紧运营培训

23 通讯:在内蒙古的留学生:传递好中国力量

24 吉林农业大学首批学生3月3日返校

25 某55岁男子娶智障女子 律师:无法领证,有刑事责任风

26 北京联合办公室租赁新模式,E园EPARK办公室秒变自习室

27 上海实施住房限售 优先购买新房的需网签备案满5年后方可转让

28 数字经济助文旅新篇——2021亚洲乐园及景点博览会5月羊城启幕

29 台湾拖家带口三人在加拿大租豪宅 院子2000平

30 金鱼排成一排看电视 主人:电视一关就散开 专家科普

历史上的今天

1 在869年前的今天,1152年3月4日 (农历正月廿六),“红胡子”腓特烈当选国王。

2 在828年前的今天,1193年3月4日 (农历正月廿九),埃及阿尤布王朝开国君主萨拉丁逝世。

3 在1871年前的今天,0150年3月4日 (农历正月十八),东汉医圣张仲景出生。

4 在343年前的今天,1678年3月4日 (农历二月十二),古典协奏曲形式的确立者维瓦尔蒂诞生。

5 在169年前的今天,1852年3月4日 (农历正月十四),俄国著名作家尼科拉伊·瓦西里也维奇·果戈理逝世。

6 在159年前的今天,1862年3月4日 (农历二月初四),中俄签订陆路通商章程。

7 在114年前的今天,1907年3月4日 (农历正月二十),孙中山被迫离。

8 在104年前的今天,1917年3月4日 (农历二月十一),国务总理段祺瑞出走天津,府院之争愈演愈烈。

9 在102年前的今天,1919年3月4日 (农历二月初三),列宁组成第三共产国际。

10 在100年前的今天,1921年3月4日 (农历正月廿五),哈定就任美国第29任总统。

11 在99年前的今天,1992年3月4日 (农历二月初六),香港英军制造“沙田惨案”。

12 在98年前的今天,1923年3月4日 (农历正月十七),胡适大力提倡研究国学。

13 在88年前的今天,1933年3月4日 (农历二月初九),富兰克林·罗斯福就任美国总统。

14 在88年前的今天,1933年3月4日 (农历二月初九),日军攻占承德。

15 在88年前的今天,1933年3月4日 (农历二月初九),日军攻占古北口。

16 在86年前的今天,1935年3月4日 (农历正月廿九),毛泽东担任红军前敌司令部政治委员。

17 在79年前的今天,1942年3月4日 (农历正月十八),美国派史迪威来华任职。

18 在77年前的今天,1944年3月4日 (农历二月初十),美国飞机第一次轰炸柏林。

19 在75年前的今天,1946年3月4日 (农历二月初一),叶挺获释。

20 1951年3月4日 (农历正月廿七),第一届亚洲运动会开幕。

21 1958年3月4日 (农历正月十五),英文《北京周报》创刊。

22 1967年3月4日 (农历正月廿四),斯大林的女儿叛逃西方。

23 1974年3月4日 (农历二月十一),希思辞职,哈罗德·威尔逊再度成为英国首相。

24 1975年3月4日 (农历正月廿二),石油输出国组织第一届首脑会议在阿尔及尔举行。

25 1980年3月4日 (农历正月十八),穆加贝即将组织津巴布韦黑人政权。

26 1983年3月4日 (农历正月二十),邓小平说:不能再用解放台湾这个提法。

27 1985年3月4日 (农历正月十三),邓小平会见日本商工会议所访华团。

28 1986年3月4日 (农历正月廿四),瓦尔德海姆被指控曾是纳粹分子。

29 1986年3月4日 (农历正月廿四),著名女作家丁玲逝世。

30 1987年3月4日 (农历二月初五),中国六大航空公司成立。

31 1988年3月4日 (农历正月十七),国务院决定扩大沿海经济开放区。

32 1989年3月4日 (农历正月廿七),邓小平指出:搞四化搞改革开放关键是稳定。

33 1990年3月4日 (农历二月初八),肖红教授获香港区旗、区徽设计最高奖。

34 1998年3月4日 (农历二月初六),瓦杰帕伊当选印度新总理。

35 2000年3月4日 (农历正月廿九),中国物理学家,被誉为中国物理学之父的吴大猷逝世。

36 2002年3月4日 (农历正月廿一),中国耕作学创始人之一沈学年逝世。

37 2003年3月4日 (农历二月初二),菲律宾一国际机场发生炸弹爆炸,造成至少19人死亡。

38 2003年3月4日 (农历二月初二),中国《2001-2002中国城市发展报告》首次评估城市。

39 2005年3月4日 (农历正月廿四),胡锦涛在北京提出新形势下发展两岸关系的四点意见。

40 2006年3月4日 (农历二月初五),胡锦涛在全国政协分组讨论中提出“八荣八耻”论述。

41 在1440年前的今天,0581年3月4日 (农历二月十四),隋文帝杨坚取代北周即帝位。

百度统计 站长统计

©2018-2021 www.ntbk8.cn. All rights reserved.  蜀ICP备18006425号

友情链接:  若岚博客  vipbic  卢松松博客  快云vps  Geticsen  聚宝盆  飞之梦工作室  7分钟课堂  提交友链