bootstrap-fileinput上传组件197

/**
 * @param preview 文件列表
 * @param config  配置项
 * @param valueId 存放附件id的id
 * @param fildRegisterId 注册组件的id
 * @param fileType 文件上传类型 []
 * @param validatorField 验证id
 */
function initDeclaredeclareUpload(preview, config, valueId, fildRegisterId, fileType, validatorField) {
    let fileIds = [];
    let htmlFileid = $("#" + valueId).val();
    if (htmlFileid) {
        if (htmlFileid.indexOf(',') > -1) {
            let idsdb = htmlFileid.split(',');
            fileIds = fileIds.concat(idsdb);
        } else {
            fileIds.push(htmlFileid);
        }
    }
    let map = new Map();
    let type = '';//文件提示限制类型
    if (fileType && fileType.length > 0) {
        type = fileType.join(',')
    } else {
        type = ".doc, .docx, .xls, .xlsx, .pdf";
    }
    $("#" + fildRegisterId).fileinput({
        theme: "explorer",
        uploadUrl: "/file/uploadFile", //上传的地址
        // uploadExtraData:{pdId:pdId},
        minFileCount: 0,
        maxFileCount: 20,
        overwriteInitial: false,
        showUpload: true, //是否显示上传按钮
        showCaption: true,//是否显示标题
        showRemove: false,
        showBrowse: true,
        browseOnZoneClick: true,
        language: 'zh',
        dropZoneTitle: '拖拽文件到这里，或点击此处选择文件 &hellip;<br>支持多文件同时上传',
        dropZoneClickTitle: '<br>文件类型' + type,
        autoReplace: true,//是否替换
        validateInitialCount: true,
        allowedFileExtensions: (undefined != fileType && fileType.length > 0) ? fileType : ['doc', 'docx', 'xls', 'xlsx', 'pdf'],
        msgInvalidFileExtension: '上传文件类型错误"{name}".只能上传"{extensions}"类型的文件',
        initialPreview: preview,//初始预览内容
        previewSettings: {
            image: { '150px', height: '150px'}
        },
        /*initialPreviewAsData: true, // defaults markup
        uploadExtraData: {
            img_key: "1000",
            img_keywords: "happy, nature",

        },*/
        initialPreviewConfig: config,
        /*initialPreviewConfig: [
            {caption: "Business 1.jpg", size: 762980, url: "/site/file-delete", key: 11},
            {caption: "Business 2.jpg", size: 823782, url: "/site/file-delete", key: 13, previewAsData: false},
            {caption: "PDF Sample.pdf", size: 8000, url: "/site/file-delete", key: 14, type: "pdf"},
            //{caption: "Lorem Ipsum.txt", type: "text", size: 1430, url: "/site/file-delete", key: 12},
            //{type: "video", size: 375000, filetype: "video/mp4", caption: "Krajee Sample.mp4", url: "/site/file-delete", key: 15},
        ],*/
        preferIconicPreview: true, // this will force thumbnails to display icons for following file extensions
        // previewFileIcon: '<i class="glyphicon glyphicon-file"></i> &nbsp;',
        /*previewFileIconSettings: { // configure your icon file extensions
            'doc': '<i class="fa fa-file-word-o text-primary" ><img src="/images/wj.png" style=" 30px;height: 30px"/></i>',
            'xls': '<i class="fa fa-file-excel-o text-success"><img src="/images/wj.png"/></i>',
            //'ppt': '<i class="fa fa-file-powerpoint-o text-danger"><img src="/img/excel.png"/></i>',
            'pdf': '<i class="fa fa-file-pdf-o text-danger"><img src="/images/wj.png"/></i>',
            //'zip': '<i class="fa fa-file-archive-o text-muted"></i>',
            //'htm': '<i class="fa fa-file-code-o text-info"></i>',
            //'txt': '<i class="fa fa-file-text-o text-info"><img src="/img/excel.png"/></i>',
            //'mov': '<i class="fa fa-file-movie-o text-warning"></i>',
            //'mp3': '<i class="fa fa-file-audio-o text-warning"></i>',
            // note for these file types below no extension determination logic
            // has been configured (the keys itself will be used as extensions)
            'jpg': '<i class="fa fa-file-photo-o text-danger"><img src="/images/wj.png"/></i>',
            //'gif': '<i class="fa fa-file-photo-o text-muted"></i>',
            'png': '<i class="fa fa-file-photo-o text-primary"><img src="/images/wj.png"/></i>'
        },
        previewFileExtSettings: { // configure the logic for determining icon file extensions
            'doc': function (ext) {
                return ext.match(/(doc|docx)$/i);
            },
            'xls': function (ext) {
                return ext.match(/(xls|xlsx)$/i);
            },
            'ppt': function (ext) {
                return ext.match(/(ppt|pptx)$/i);
            },
            'zip': function (ext) {
                return ext.match(/(zip|rar|tar|gzip|gz|7z)$/i);
            },
            'htm': function (ext) {
                return ext.match(/(htm|html)$/i);
            },
            'txt': function (ext) {
                return ext.match(/(txt|ini|csv|java|php|js|css)$/i);
            },
            'mov': function (ext) {
                return ext.match(/(avi|mpg|mkv|mov|mp4|3gp|webm|wmv)$/i);
            },
            'mp3': function (ext) {
                return ext.match(/(mp3|wav)$/i);
            },
        }*/
    }).on("filebatchselected", function (event, files) {
        $(this).fileinput("upload");
    }).on('fileuploaderror', function (event, data, extraData) {
        layer.msg(extraData, {
            time: 2000, icon: 2
        })
    }).on('fileuploaded', function (event, data, extraData) {
        fileIds.push(data.response.data);
        map.set(extraData, data.response.data);
        fileOperation(fileIds, 'add', '', valueId);

        //表单验证
        var projectFileForm = $("#projectFileForm");
        if (validatorField && projectFileForm) {
            try {
                var validator = projectFileForm.data('bootstrapValidator');
                validator.updateStatus(validatorField, 'VALID');
            } catch (e) {
            }
        }
    }).on('filesuccessremove', function (event, key) {
        let id = map.get(key)
        fileOperation(fileIds, 'del', id, valueId)
    }).on('filedeleted', function (event, key) {
        fileOperation(fileIds, 'del', key, valueId);

        //表单验证
        if (validatorField && !fileIds) {
            try {
                var $projectFileForm = $("#projectFileForm");
                var validator = $projectFileForm.data('bootstrapValidator');
                validator.updateStatus(validatorField, 'INVALID');
            } catch (e) {
            }
        }
    });
}

/**
 * 初始化文件上传
 * @param valueId 存放附件id的id
 * @param fildRegisterId 注册组件的id
 * @param fileType 文件上传类型 []
 */
function initUploadFileInfo(valueId, fildRegisterId, fileType, validatorField) {
    let sfzZIds = $("#" + valueId).val();
    let sfzZImgs = [];
    let sfzZConfig = [];
    if (sfzZIds) {
        if (sfzZIds.indexOf(',') > 0) {
            let sfzZIdsSplit = sfzZIds.split(',');
            sfzZIdsSplit.forEach(item => {
                sfzZImgs.push('/file/imageView/' + item);
                //添加配置项
                let obj = {};
                obj.url = "/file/delOneFileById/";
                obj.key = item;
                let data = getFileName(item);
                obj.caption = data.fileName;
                sfzZConfig.push(obj);
            })
        } else {
            let data = getFileName(sfzZIds);
            sfzZImgs.push('/file/imageView/' + sfzZIds);
            //添加配置项
            let obj = {};
            obj.url = "/file/delOneFileById/";
            obj.key = sfzZIds;
            obj.caption = data.fileName;
            sfzZConfig.push(obj);
        }
    }
    initDeclaredeclareUpload(sfzZImgs, sfzZConfig, valueId, fildRegisterId, fileType, validatorField);
}

/**
 * 根据文件id获取文件名称
 * @param id
 */
function getFileName(id) {
    let obj = {}
    $.ajax({
        method: 'post',
        async: false,
        url: '/file/getFileInfoById',
        data: {id: id},
        success: function (res) {
            if (res.retcode === 0) {
                obj = res.data
            }
        }
    })
    return obj;
}

/**
 *  文件id赋给隐藏字段
 * @param ids 文件id
 * @param type del删除 add添加
 * @param key 要删除的id
 */
function fileOperation(ids, type, key, id) {
    if (type === 'del') {
        let index = ids.indexOf(key);
        if (index > -1) {
            delete ids[index];
        }
    }
    let values = '';
    let i = 0;
    //拼接字符串
    ids.forEach(item => {
        if (i > 0) {
            values += "," + item
        } else {
            values += item
        }
        if (item) {
            i++
        }
    });
    $("#" + id).val(values).change()
}