526互联

bootstrap-fileinput使用实例

发布时间 2023-06-14 09:48:28作者: 依然喜欢那片蓝天

一、上传

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 + "pub/document";
var filePrefix = ctx + "pub/file";
var id = [[${pubDocument.id}]];
// 新增文件列表
var files = [];
// 文件地址
var fileUrls = [[${pubDocument.fileUrl}]];
var urlArray = fileUrls.toString().split(',');
// 文件名称
var fileNames = [[${pubDocument.fileName}]];
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;

$("#form-document-edit").validate({
    focusCleanup: true
});

$(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: filePrefix + "/removeByUrl", // 预览文件删除路径
        initialPreviewAsData: true, // 默认为数据
        dropZoneTitle: `拖拽文件或者点击下方选择按钮...<br/><b style="color: black;">记得点击上传按钮</b>`,
        allowedFileExtensions: ['pdf', 'doc', 'docx'], // 允许上传的文件扩展
        msgInvalidFileExtension: "只支持pdf、word文件，请重新选择！",
    }).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;
        log.info();
        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;
    })
});


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='fileUrl']").val(fileUrl)
    $("input[name='fileName']").val(fileName)
    if ($.validate.form()) {
        $.operate.save(prefix + "/edit", $('#form-document-edit').serialize());
    }
}