若依 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,
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
bootstrap-fileinput是一种基于Bootstrap架的文件上传插件,它提供了简单易用的界面和丰富的功能。 首先,bootstrap-fileinput具有美观的样式,与Bootstrap的整体风格相匹配。它使用了一系列清晰、直观的图标和按钮,让用户可以方便地浏览、选择和上传文件。 其次,bootstrap-fileinput还支持多种文件展示方式。它可以以列表或网格的形式显示文件预览,在列表模式下可以显示文件的名称、大小、类型等信息,而在网格模式下则可以直观地展示文件的缩略图。这种多样化的展示方式可以让用户根据自己的需求选择最适合的视觉效果。 此外,bootstrap-fileinput还具有丰富的功能。它支持文件的多选和拖拽上传,可以通过设置参数来限制文件的大小、类型和数量等。它还提供了预览、删除和重新选择文件的功能,让用户可以在上传之前查看文件的内容和清理不需要的文件。此外,它还可以通过AJAX异步上传文件,实现无刷新上传的效果。 最后,bootstrap-fileinput还提供了一些额外的扩展功能。例如,它可以通过设置参数来自定义上传按钮的样式和文本,可以根据不同的需求注册和调用一系列的回调函数,以便实现更加灵活的操作。 总之,bootstrap-fileinput是一个功能强大、界面美观的文件上传插件,它可以为用户提供便捷的文件管理和上传体验。不仅仅可以用于网站开发,也可以用在各种基于Bootstrap架的Web应用中。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值