bootstrap-fileinput使用实例

一、上传

var prefix = ctx + "pub/document"

var files = [];

$(document).ready(function () {
    // 文件上传组件初始化
    $("#fileUpload").fileinput({
        layoutTemplates: {
            // 隐藏上传小图标
            actionUpload: ''
        },
        uploadUrl: ctx + 'common/uploads',
        //maxFileCount: 1,
        //autoReplace: true,
        showCaption: false,// 是否显示标题
        uploadAsync: false,// 是否为异步上传
        showClose: false,
        showRemove: false,
        dropZoneTitle: `拖拽文件或者点击下方选择按钮...<br/><b style="color: black;">记得点击上传按钮</b>`,
        allowedFileExtensions: ['pdf', 'doc', 'docx'], // 允许上传的文件扩展
        msgInvalidFileExtension: "只支持pdf、word文件，请重新选择！",
    }).on('filebatchuploadsuccess', function (event, data, previewId, index) {
        //debugger;
        var rsp = data.response;
        // log.info("return urls：" + rsp.urls)
        // log.info("reutrn fileNames：" + rsp.fileNames)
        // log.info("reutrn newFileNames：" + rsp.newFileNames)
        // log.info("return originalFilenames：" + rsp.originalFilenames)
        // 将后台传的数据转化为数组
        let urlArray = rsp.fileNames.toString().split(",");
        let nameArray = rsp.originalFilenames.toString().split(",");
        // 找到以“thumb-fileUpload-”前缀的div标签, 注意：这里是总的数目
        let divArray = $('div[id^="thumb-fileUpload-"]');
        let length = files.length;
        for (let i = 0; i < data.filescount; i++) {
            files.push({fileUrl:urlArray[i], fileName:nameArray[i], id:divArray[length + i].id });
        }
    }).on('filesuccessremove', function (event, id) {
        // 上传完成后, 移除成功通知
        //debugger;
        for (let i = 0; i < files.length; i++) {
            if (id === files[i].id) {
                // 删除物理文件
                $.operate.post(prefix + "/deleteFile", {key: files[i].fileUrl})
                files.splice(i, 1)
                break;
            }
        }
    })
});

// 表单提交方法
 function submitHandler() {
     if (files.length === 0) {
         $.modal.msgWarning('请先上传文件');
         return;
     }
     let fileName = '',fileUrl = '';
     // 遍历文件信息，封装数据
     for (let i = 0; i < files.length; i++) {
         if (i !== 0) {
             fileName += ',';
             fileUrl += ',';
         }
         fileName += files[i].fileName;
         fileUrl += files[i].fileUrl;
     }
     $("input[name='fileUrl']").val(fileUrl)
     $("input[name='fileName']").val(fileName)
     // 表单校验及保存
     if ($.validate.form()) {
         $.operate.save(prefix + "/add", $('#form-document-add').serialize());
     }
 }

二、编辑

 

var prefix = ctx + "meetingroom/room";
        $("#form-room-edit").validate({
            focusCleanup: true
        });

        // 新增文件列表
        var files = [];
        // 文件地址
        var fileUrls = [[${meetingRoom.imgsUrl}]];
        var urlArray = fileUrls.toString().split(',');
        // 文件名称
        var fileNames = [[${meetingRoom.imgsName}]];
        var nameArray = fileNames.toString().split(',');
        // 文件回显数组
        var initialPreview = [];
        var initialPreviewConfig = [];
        for (let i = 0; i < urlArray.length; i++) {
            initialPreview.push(ctx + urlArray[i]);
            initialPreviewConfig.push(getFileConfig(ctx + urlArray[i], urlArray[i], nameArray[i]));
        }
        // 预览的个数
        var initialLength = initialPreview.length;

        $(document).ready(function () {
            // 文件上传组件初始化
            $("#fileUpload").fileinput({
                layoutTemplates: {
                    // 隐藏上传小图标
                    actionUpload: ''
                },
                uploadUrl: ctx + 'common/uploads',
                //maxFileCount: 1,
                showCaption: false,//是否显示标题
                uploadAsync: false,// 是否为异步上传
                showClose: false,
                showRemove: false,
                overwriteInitial: false, // 上传新文件不覆盖预览的
                initialPreview: initialPreview,
                initialPreviewConfig: initialPreviewConfig,
                deleteUrl: prefix + "/removeByUrl", // 预览文件删除路径
                initialPreviewAsData: true, // 默认为数据
                dropZoneTitle: `拖拽文件或者点击下方选择按钮...<br/><b style="color: black;">记得点击上传按钮</b>`,
                allowedFileExtensions: ['png', 'jpg'], // 允许上传的文件扩展
                msgInvalidFileExtension: "只支持图片文件，请重新选择！",
            }).on('filebatchuploadsuccess', function (event, data, previewId, index) {
                var rsp = data.response;
                // log.info("return urls：" + rsp.urls)
                // log.info("reutrn fileNames：" + rsp.fileNames)
                // log.info("reutrn newFileNames：" + rsp.newFileNames)
                // log.info("return originalFilenames：" + rsp.originalFilenames)
                // 将后台传的数据转化为数组
                let urlArray = rsp.fileNames.toString().split(",");
                let nameArray = rsp.originalFilenames.toString().split(",");
                // 找到以“thumb-fileUpload-”前缀的div标签, 注意：这里是总的数目
                let divArray = $('div[id^="thumb-fileUpload-"]');
                // 已加文件数目
                let length = files.length;
                for (let i = 0; i < data.filescount; i++) {
                    files.push({fileUrl:urlArray[i], fileName:nameArray[i], id:divArray[length + initialLength + i].id });
                }
            }).on('filesuccessremove', function (event, id) {
                // 上传完成后, 移除成功通知
                for (let i = 0; i < files.length; i++) {
                    if (id === files[i].id) {
                        // 删除物理文件
                        $.operate.post(prefix + "/deleteFile", {key: files[i].fileUrl})
                        files.splice(i, 1)
                        break;
                    }
                }
            }).on('filedeleted', function (event, key) {
                // 监听删除预览的事件
                initialLength = initialLength -1;
            })
        });

        /**
         * 获取文件回显配置
         * @param fileUrl
         * @param key 传给后台删除的路径
         */
        function getFileConfig(url, key, name) {
            if(url != null && url !== ''){
                // 获取文件后缀
                var type = url.substr(url.lastIndexOf('.') + 1);
                return {type: "image", caption: name, key: key, downloadUrl: url};
            }
        }

        function submitHandler() {

            if (files.length === 0 && initialLength === 0) {
                $.modal.msgWarning('请先上传文件');
                return;
            }
            let fileName = '',fileUrl = '';
            // 遍历文件信息，封装数据
            for (let i = 0; i < files.length; i++) {
                if (i !== 0) {
                    fileName += ',';
                    fileUrl += ',';
                }
                fileName += files[i].fileName;
                fileUrl += files[i].fileUrl;
            }
            $("input[name='imgsUrl']").val(fileUrl)
            $("input[name='imgsName']").val(fileName)

            if ($.validate.form()) {
                $.operate.save(prefix + "/edit", $('#form-room-edit').serialize());
            }
        }