layui封装upload

//定义构造函数
var Upfile = function(ele, opt) {
        var uploadInst;
        this.SetInst = function(obj) {
        uploadInst = obj;
    }
//列表tbody节点
var demoListView = $(ele).parent('div').find('tbody');
    this.defaults = {
        elem: ele,
        url: '/upload/',
        accept: 'file',
        multiple: true,
        auto: false,
        bindAction: '#' + $(ele).next('button').attr('id'),
        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>' + (file.size / 1014).toFixed(1) + 'kb</td>', '<td>等待上传</td>', '<td>', '<button class="layui-btn layui-btn-xs demo-reload layui-hide" style="background:red">重传</button>', '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>', '</td>', '</tr>'].join(''));
                if(file.type.indexOf("image") != -1) {
                    tr = $(['<tr id="upload-' + index + '">', '<td><a class="demo-a" href="javascript:" style="text-decoration: underline;color: #3091e2;"><img src="' + result + '" style="width:20px;height:20px;margin-right:10px"/>' + file.name + '</a></td>', '<td>' + (file.size / 1014).toFixed(1) + 'kb</td>', '<td>等待上传</td>', '<td>', '<button class="layui-btn layui-btn-xs demo-reload layui-hide" style="background:red">重传</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-a').on("click", function() {
                imgView(result)
            })
            //删除
            tr.find('.demo-delete').on('click', function() {
                console.log(uploadInst)
                delete files[index]; //删除对应的文件
                uploadInst.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                                tr.remove();
                        });

            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(''); //清空操作
            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'); //显示重传
        }
    }
        this.options = $.extend({}, this.defaults, opt);
      };

                //在插件中使用对象
                $.fn.upfile = function() {
                    var upfile = new Upfile(this);
                    
                    layui.use('upload', function() {
                        var upload = layui.upload;
                        var UplodeIn = upload.render(upfile.options);
                        upfile.SetInst(UplodeIn)
                        
                    });

                }
    

            //上传
            $('#file3').upfile();
            $('#file4').upfile();

摘自:https://www.cnblogs.com/kongge/p/9420554.html；
并根据自身需求所做的相应调整更改