[JavaScript知识库]Layui上传系列之三（插件封装，简化开发）

虽然实现了多文件分块上传，但是每个页面用到上传都要写那么多代码，还是不爽啊，而且还要绑定文件列表，那就再封装一下吧，开发用起来也就简单了，把layui的uploader都给他屏蔽掉。

有了前面的基础，那就继续走一波了。

//上传控件
function uploader() {
    this.option = null;
}

//上传控件初始化
uploader.init = function (option) {
    //定义上传控件对象，初始化后返回对象
    var uploaderObj = new uploader();
    uploaderObj.option = option;

    //上传按钮ID
    var uploadBtnId = option.uploadBtnId;
    //上传列表ID
    var uploadListId = option.uploadListId;
    //上传服务地址
    var url = option.url;

    //相关属性定义，省略…

    var uploadInst = upload.render({
        elem: '#' + uploadBtnId //绑定元素
        , elemList: $('#' + fileListId) //列表元素对象
        , url: url //上传接口
        , accept: 'file'
        , auto: false
        , multiple: true

        //部分代码与之前基本相同，省略…
    });

    return uploaderObj;
};

uploader.prototype.bindFile = function () {
    var url = buildUrl('/Sys/Handler/FileUploadHandler.ashx?action=GetFileList', null);
    var that = this;
    
    var downloadUrl = buildUrl('/Sys/Handler/FileDownloadHandler.ashx', null);
    $.get(url, function (res) {
        $('#' + that.option.filesBindId).empty();

        var files = res.data;
        for (var fileIndex in files) {
            var file = files[fileIndex];
            var fileId = file.FileId;
            var fileUrl = downloadUrl + '?fileId=' + fileId;
            var fileName = file.FileName;

            var $fileTr = $([
                '<tr>'
                , '<td>'
                , '<a target="_blank" href="' + fileUrl + '">' + fileName + '</a>'
                , '</td>'
                , '<td>' + createUserName + '</td>'
                , '<td>' + createDate + '</td>'
                , '<td style="text-align:center;"><a flag="del" style="cursor:pointer;"><i class="layui-icon layui-icon-delete color-red"></i></a></td>'
                , '</tr>'].join(''));

            $fileTr.find('a[flag="del"]').click(function () {
                var layer = layui.layer;
                layer.confirm('确定删除该文件？', function (index) {
                    deleteFile(fileId);

                    layer.close(index);
                });
            });

            $('#' + that.option.filesBindId).append($fileTr);
        }
    });

    //删除文件
    function deleteFile(fileId) {
        var deleteUrl = buildUrl('/Sys/Handler/FileUploadHandler.ashx?action=DeleteFile', null);
        deleteUrl += '&fileId=' + fileId;

        $.get(deleteUrl, function (res) {
            if (checkResult(res, '删除文件失败')) {
                that.bindFile();
            }
        });
    }
});

调用：

html

<div class="layui-form-item">
? ? ? ? <label class="layui-form-label">附件</label>
? ? ? ? <div class="layui-input-block">
? ? ? ? ? ? <button type="button" class="layui-btn ?layui-btn-sm" id="btnFile" >
? ? ? ? ? ? ? ? <i class="layui-icon layui-icon-upload"></i>上传文件
? ? ? ? ? ? </button>
? ? ? ? ? ? <table class="layui-table" id="files">
? ? ? ? ? ? </table>
? ? ? ? </div>
</div>

js

var fileUpload = uploader.init({
                uploadBtnId: 'btnFile'//上传按钮ID
                , filesBindId: 'files'//文件绑定ID
                , afterUpload: function () {//上传完执行，可不实现

                }
            });

//加载文件列表
fileUpload.bindFile();

看，看，看，是不超级简单了呢。

研究前面的东西花了2-3天，完成封装用了一天多，感觉还是不错的。

系列回顾：

?Layui上传系列之一（小试牛刀原理为先）_龙井茶的Sky-CSDN博客https://blog.csdn.net/to_love_/article/details/120659695?Layui上传系列之二（多文件分块上传优化实现）_龙井茶的Sky-CSDN博客https://blog.csdn.net/to_love_/article/details/120659906