zoukankan      html  css  js  c++  java
  • layui文件列表上传实例

    layui文件列表上传实例

     <div class="layui-inline" style="margin-left: 132px">
                <label class="layui-form-label">文件上传</label>
                <div class="layui-upload" style="margin-left: 110px">
                    <button type="button" class="layui-btn " id="test8">选择文件</button>
                    <button type="button" class="layui-btn" id="testListAction">开始上传</button>
                </div>
            </div>
    
    var uploadIndex;
            var demoListView = $('#demoList')
                , uploadListIns = upload.render({
                elem: '#test8'
                , url: "/uploadFile"
                , accept: 'file'
                , multiple: true
                , auto: false
                , size: 51200
                , bindAction: '#testListAction'
                , before: function () {
                    uploadIndex = layer.msg('上传中,请稍后...', {time: 0, icon: 16,shade:0.01})
                }, allDone: function (obj) {
                    if (uploadIndex) {
                        layer.close(uploadIndex);
                    }
                    //防止无文件上传点击触发load
                    $("#testListAction").attr("disabled", true);
                }
                , choose: function (obj) {
                    $('#testListAction').removeAttr("disabled");
                    var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                    //读取本地文件
                    obj.preview(function (index, file, result) {
                        var tr = $(['<tr id="upload-' + index + '">'
                            , '<td>' + file.name + '</td>'
                            , '<td>' + (file.size / 1024).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();
                            //清空 input file 值,以免删除后出现同名文件不可选
                            uploadListIns.config.elem.next()[0].value = ''; 
                        });
                        demoListView.append(tr);
                    });
                }
                , done: function (res, index, upload) {
                    if (res.code == 0) { //上传成功
                        var tr = demoListView.find('tr#upload-' + index)
                            , tds = tr.children();
                        tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
                        tds.eq(3).html(''); //清空操作
                        $('#fileCd').append(res.fileCd + ",");
                        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(2).html('<span style="color: #FF5722;">上传失败</span>');
                    tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
                }
            });
    
    作者: JaminYe
    版权声明:本文原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
  • 相关阅读:
    Dot Net WinForm 控件开发 (七) 为属性提下拉式属性编辑器
    WinForm 程序的界面多语言切换
    c#遍历HashTable
    Dot Net WinForm 控件开发 (三) 自定义类型的属性需要自定义类型转换器
    Dot Net WinForm 控件开发 (六) 为属性提供弹出式编辑对话框
    Dot Net WinForm 控件开发 (一) 写一个最简单的控件
    Dot Net WinForm 控件开发 (四) 设置属性的默认值
    Dot Net WinForm 控件开发 (二) 给控件来点描述信息
    Dot Net WinForm 控件开发 (八) 调试控件的设计时行为
    Dot Net WinForm 控件开发 (五) 复杂属性的子属性
  • 原文地址:https://www.cnblogs.com/JaminYe/p/13394257.html
Copyright © 2011-2022 走看看