BootStrap FileInput插件使用

1.使用插件需要先导入

<link rel="stylesheet" href="../css/fileinput.min.css"/>
<script src="../js/fileinput.min.js"></script>
<script src="../js/zh.js"></script>

其中zh.js为语言包。

2.加入input元素，网上一些代码会加class=“file”，在使用中文的情况下加入class=“file”会导致无法显示中文

<input id="file-pic1"  type="file"  multiple/>

3.js的编写

 $(function(){
        $('#file-pic1').fileinput({

            //初始化上传文件框
            language: "zh",//配置语言
            showPreview: false,//是否显示预览
            showUpload: true, //显示整体上传的按钮
            showRemove: false,//显示整体删除的按钮
            uploadAsync: false,//默认异步上传
//            uploadLabel: "上传",//设置整体上传按钮的汉字
            removeLabel: "移除",//设置整体删除按钮的汉字
            uploadClass: "btn btn-primary",//设置上传按钮样式
            showCaption: true,//是否显示标题
            dropZoneEnabled: false,//是否显示拖拽区域
            showUpload: false,//是否显示上传按钮
//                    uploadUrl: getPath('/gz/tool/toolAction/uploadImgFile'),//这个是配置上传调取的后台地址，本项目是SSM搭建的
            maxFileSize : 9999,//文件大小限制
            maxFileCount: 1,//允许最大上传数，可以多个，
            enctype: 'multipart/form-data',
            allowedFileExtensions : ["jpg", "png","gif","docx","zip","xlsx","txt"],/*上传文件格式限制*/
            msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
            showBrowse: true,
            browseOnZoneClick: true,
            initialCaption: "请选择上传图片",//输入提示
            slugCallback : function(filename) {
                return filename.replace('(', '_').replace(']', '_');
            }
        });
    });

该控件支持异步上传，预览功能，比较好用