若依 bootstrap-fileinput上传框的应用

一.导入CSS、JS

<link th:href="@{/ajax/libs/bootstrap-fileinput/fileinput.min.css}" rel="stylesheet"/>
<script th:src="@{/ajax/libs/bootstrap-fileinput/fileinput.min.js}"></script>

二.HTML内容

<input class="form-control file-upload" id="fileUpload" name="file" type="file">
<input type="text" name="fileName">

三.JS内容

由于该需求只允许用户上传一个文件，但是用户上传成功之后，可以继续选择文件，设置了maxFileCount=1,也没有效果，这个设置的是允许同时上传的个数。
解决办法：
隐藏上传按钮，用户选择好文件以后，再调用上传事件。

    <script th:inline="javascript">
   		//点击提交
        async function submitHandler() {
        //调用上传事件
            await $("#fileUpload").fileinput("upload");
        }

        $('#fileUpload').fileinput({
            uploadUrl: '/common/upload?uploadPath=course/file',
            maxFileCount: 1,
            maxFileSize: "20480",//最大容量 20M
            validateInitialCount:true,
            uploadAsync: true, //默认异步上传,这里设置了异步
            showUpload:false,//隐藏上传按钮
            enctype: 'multipart/form-data',
            allowedFileExtensions : [
                // 图片
                'bmp', 'gif', 'jpg', 'jpeg', 'png',
                // word excel powerpoint 办公
                'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'html', 'htm', 'txt',
                // 压缩文件
                'rar', 'zip', 'gz', 'bz2',
                // pdf
                'pdf'
            ],//接收的文件后缀
            autoReplace: true,  //是否自动替换当前图片，设置为true时，再次选择文件， 会将当前的文件替换掉。
            layoutTemplates:{//图片下方的上传和删除按钮
                actionUpload:'',    //设置为空可去掉上传按钮
                actionDelete:''  //设置为空可去掉删除按钮
            },
            showClose:false//是否显示右上角关闭按钮
        }).on('fileuploaded', function (event, data, previewId, index) {//异步上传成功
            if(data.response.code == 0){
                $("input[name='fileName']").val(data.files[0].name);//文件名
                $("input[name='fileUrl']").val(data.response.fileName);//文件地址
                $("input[name='fileSize']").val(change(data.files[0].size));//文件大小
                if ($.validate.form()) {
                    $.operate.save(prefix + "/add", $('#form-file-add').serialize());
                }
            }else{
                $.modal.alertError(data.response.msg);//弹窗错误信息
            }
        }).on('fileremoved', function (event, id, index) {//点击文件下方的删除
            $("input[name='" + event.currentTarget.id + "']").val('');//文件名
            $("input[name='fileUrl']").val('');//文件地址
            $("input[name='fileSize']").val('');//文件大小
        }).on('fileerror', function(event, data, msg) {  //一个文件上传失败
            console.log('文件上传失败！'+msg);
        });


        //删除文件事件
        $('.fileinput-remove-button').click(function (){
            $("input[name='fileName']").val('');//文件名
            $("input[name='fileUrl']").val('');//文件地址
            $("input[name='fileSize']").val('');//文件大小
        })

        //js中字节B转化成KB，MB，GB
        function change(limit){
            var size = "";
            if(limit < 0.1 * 1024){                            //小于0.1KB，则转化成B
                size = limit.toFixed(2) + "B"
            }else if(limit < 0.1 * 1024 * 1024){            //小于0.1MB，则转化成KB
                size = (limit/1024).toFixed(2) + "KB"
            }else if(limit < 0.1 * 1024 * 1024 * 1024){        //小于0.1GB，则转化成MB
                size = (limit/(1024 * 1024)).toFixed(2) + "MB"
            }else{                                            //其他转化成GB
                size = (limit/(1024 * 1024 * 1024)).toFixed(2) + "GB"
            }

            var sizeStr = size + "";                        //转成字符串
            var index = sizeStr.indexOf(".");                    //获取小数点处的索引
            var dou = sizeStr.substr(index + 1 ,2)            //获取小数点后两位的值
            if(dou == "00"){                                //判断后两位是否为00，如果是则删除00
                return sizeStr.substring(0, index) + sizeStr.substr(index + 3, 2)
            }
            return size;
        }
    </script>

四.修改

遍历上传Input框，配置initialPreviewConfig、initialPreviewAsData、initialPreview属性，编辑查看只支持图片、文本，不知道Word之类的

$("#fileUpload").each(function (i) {
            var val = $("input[name=fileUrl]").val()//图片URL
            var fileName = $("input[name=fileName]").val()//图片名称
            let initialPreviewConfig=[
                {
                    caption: fileName // 文件名
                    // width: '120px',
                    // url: '/admin/deleteImage', // 删除url
                    // key: '参数', // 删除是Ajax向后台传递的参数post请求
                    // extra: function() { //删除时向后台传递参数，可以是json对象
                    //     return {'id': id};
                    // }
                }
            ]

            $(this).fileinput({
                'uploadUrl': '/common/upload?uploadPath=course/file',
                initialPreviewAsData: true,
                initialPreview: [
                    val
                ],
                initialPreviewConfig:initialPreviewConfig,