bootstrap-fileinput 多组件多文件上传

最新推荐文章于 2024-09-20 19:51:10 发布

fmi110

最新推荐文章于 2024-09-20 19:51:10 发布

阅读量2.1k

点赞数 1

分类专栏：前端文章标签： bootstrap servlet html

本文链接：https://blog.csdn.net/fmi110/article/details/126166699

版权

前端专栏收录该内容

4 篇文章 1 订阅

订阅专栏

该博客展示了如何使用HTML和JavaScript优化文件上传功能，包括支持多个input输入框，文件回显及删除操作。通过遍历各上传字段，初始化文件上传组件，监听删除按钮事件来实现文件管理。代码中使用了file-input组件，具备上传、预览、删除等特性，并对不同类型的文件使用不同的图标进行预览。

摘要由CSDN通过智能技术生成

对之前的使用做了一些优化,有时候页面需要多个上传的input,并且需要回显和删除,做了简单的处理,效果图如下:

html代码:

<div class="col-sm-6">
            <div class="form-group">
                <label class="col-sm-3 control-label">身份证：</label>
                <div class="col-sm-8">
                    <input name="idUrl" class="form-control" type="hidden" th:value="${formData?.idUrl}">
                    <input name="host" class="form-control" type="hidden" th:value="${formData?.host}">
                    <div class="file-loading">
                        <input class="fileUpload idUrl" type="file" id="idFile" name="file" multiple>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="form-group">
                <label class="col-sm-3 control-label">资格证：</label>

                <div class="col-sm-8">
                    <input name="certificationUrl" class="form-control" type="hidden"
                           th:value="${formData?.certificationUrl}">
                    <div class="file-loading">
                        <input class="fileUpload certificationUrl" type="file" name="file" multiple>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="form-group">
                <label class="col-sm-3 control-label">执业证：</label>
                <div class="col-sm-8">
                    <input name="practiseUrl" class="form-control" type="hidden" th:value="${formData?.practiseUrl}">
                    <div class="file-loading">
                        <input class="fileUpload practiseUrl" type="file" name="file" multiple>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="form-group">
                <label class="col-sm-3 control-label">职称证：</label>
                <div class="col-sm-8">
                    <input name="postUrl" class="form-control" type="hidden" th:value="${formData?.postUrl}">
                    <div class="file-loading">
                        <input class="fileUpload postUrl" type="file" name="file" multiple>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="form-group">
                <label class="col-sm-3 control-label">进修证：</label>
                <div class="col-sm-8">
                    <input name="furtherEduUrl" class="form-control" type="hidden"
                           th:value="${formData?.furtherEduUrl}">
                    <div class="file-loading">
                        <input class="fileUpload furtherEduUrl" type="file" name="file" multiple>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="form-group">
                <label class="col-sm-3 control-label">培训证：</label>
                <div class="col-sm-8">
                    <input name="trainUrl" class="form-control" type="hidden" th:value="${formData?.trainUrl}">
                    <div class="file-loading">
                        <input class="fileUpload trainUrl" type="file" name="file" multiple>
                    </div>
                </div>
            </div>
        </div>

js代码:

<!--文件上传组件逻辑-->
<script th:inline="javascript">

    $(function () {
        var arr = ['idUrl', 'certificationUrl', 'practiseUrl', 'postUrl', 'furtherEduUrl', 'trainUrl']
        arr.forEach(function (selector) {
            var fileUrl = $('input[name=' + selector + ']').val()
            console.log('fileUrl:' + fileUrl)
            initFileUpload(selector, fileUrl, $('input[name=' + selector + ']'))
        })

        // 监听删除按钮
        $('.kv-file-remove').click(function () {
            var title = $(this).parent().parent().parent().parent().find('.file-footer-caption').attr('title')
            console.log(`>>>>>>移除文件`)
            console.log(`fileUrl:${title}`)
        })

        // 监听删除按钮
        $('.fileinput-remove-button').click(function () {
            console.log('>>>>>>fileinput-remove-button 移除文件:')
            console.log($(this).parent().parent().parent().parent().find('input.form-control')[0])
            $(this).parent().parent().parent().parent().find('input.form-control').val('')
        })

        // 监听删除按钮
        $('.fileinput-remove').click(function () {
            console.log('>>>>>>fileinput-remove 移除文件:')
            console.log($(this).parent().parent().parent().find('input.form-control')[0])
            $(this).parent().parent().parent().find('input.form-control').val('')
        })
    })

    function initFileUpload(clazzSelector, fileUrl, inputObj) {
        $("." + clazzSelector).fileinput('destroy') // 先销毁
        $("." + clazzSelector).fileinput(getOption(fileUrl))
            .on("filebatchselected", doUpload())
            .on("fileuploaded", function (event, data, previewId, index) {
                // 文件上传成功
                var result = data.response
                if (+result.code == +web_status.SUCCESS) {
                    debugger
                    // 处理多个文件的情况
                    if (inputObj.val()) {
                        inputObj.val(inputObj.val() + ',' + result.url)
                    } else {
                        inputObj.val(result.url);
                    }
                    $('input[name=host]').val(result.host)
                    console.log('------上传成功---')
                    console.log(inputObj.val())
                } else {
                    $.modal.alertError(result.msg);
                }
            })
            .on("filesuccessremove", function (event, data, previewId, index) {
                console.log('------filesuccessremove---')
                console.log(data)
            }).on("filebatchselected", function (event, data, previewId, index) {
            console.log('------filebatchselected 清除input 值---')
            inputObj.val('');
        });
    }


    function doUpload() {
        return function (event, data) {//选择即上传
            if (!!!data[0]) {
                $(this).fileinput("upload") // 上传文件
            }
        };
    }

    // 生成预览文件链接，返回数组对象
    function initialPreview(fileUrl) {
        if (fileUrl) {
            return fileUrl.split(',');
        } else {
            return []
        }
    }

    // 预览文件配置，需要跟 initialPreview() 返回的数组一一对应
    function initialPreviewConfig(fileUrl) {
        var ext = fileUrl.substr(fileUrl.lastIndexOf('.') + 1)
        let extType = 'object'

        if (/(pdf)$/i.test(ext)) {
            extType = 'pdf'
        }

        if (/(bmp|gif|jpg|jpeg|png)$/i.test(ext)) {
            extType = 'image'
        }

        return [
            {
                type: extType,
                // size: 8000,
                // caption: docName,
                filename: fileUrl,
                url: fileUrl,
                key: fileUrl
            },

        ]
    }

    function getOption(fileUrl) {
        return {
            theme: 'explorer-fas',
            uploadUrl: ctx + "common/upload",
            language: 'zh',
            // allowedFileExtensions: ['bmp', 'gif', 'jpg', 'jpeg', 'png', 'doc', 'docx','xls', 'xlsx', 'ppt', 'pptx', 'pdf',],
            allowedFileExtensions: ['bmp', 'gif', 'jpg', 'jpeg', 'png', 'pdf'],
            dropZoneEnabled: false,
            maxFileCount: 10,
            minFileCount: 1,
            autoReplace: false,
            overwriteInitial: true,
            layoutTemplates: {
                actionUpload: '',//去除上传预览缩略图中的上传图片
                //actionZoom:'',   //去除上传预览缩略图中的查看详情预览的缩略图标
                //actionDownload:'' //去除上传预览缩略图中的下载图标
                actionDelete: '', //去除上传预览的缩略图中的删除图标
            },
            showUploadedThumbs: false,
            showUpload: false,
            fileDropZoneTitle: 'xxx',
            // previewFileType: ['image'],
            initialPreview: initialPreview(fileUrl),
            initialPreviewConfig: initialPreviewConfig(fileUrl),
            initialPreviewAsData: true, // 默认为数据
            initialPreviewFileType: 'image', // 默认为`image`，在下面的配置中可以覆盖
            preferIconicPreview: true, // 这将强制缩略图按照以下文件扩展名的图标显示
            previewFileIconSettings: { // 配置你的文件扩展名对应的图标
                'doc': '<i class="fa fa-file-word-o text-primary"></i>',
                'xls': '<i class="fa fa-file-excel-o text-success"></i>',
                'ppt': '<i class="fa fa-file-powerpoint-o text-danger"></i>',
                // 'pdf': '<i class="fa fa-file-pdf-o text-danger"></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"></i>',
                'mov': '<i class="fa fa-file-movie-o text-warning"></i>',
                'mp3': '<i class="fa fa-file-audio-o text-warning"></i>',
                // 以下这些文件类型的注释未配置扩展名确定逻辑（键值本身会被用作扩展名）
                // has been configured (the keys itself will be used as extensions)
                // 'jpg': '<i class="fa fa-file-photo-o text-danger"></i>',
                // 'gif': '<i class="fa fa-file-photo-o text-muted"></i>',
                // 'png': '<i class="fa fa-file-photo-o text-primary"></i>'
            },
            previewFileExtSettings: { // 配置确定图标文件扩展名的逻辑代码
                '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);
                },
            }

        }
    }

</script>