bootstrap-fileinput 安装使用

参考文献：http://bootstrap-fileinput.com/

 

bootstrap-fileinput 安装使用

安装

使用Bower

要使用npm包管理器进行安装，执行如下命令：

bower install bootstrap-fileinput

使用NPM

要使用npm包管理器进行安装，执行如下命令：

npm install bootstrap-fileinput

手动安装

你可以手动安装。下载zip资源, ZIP or TAR ball到本地解压，然后将文件放到你的工程目录下

 

使用

1、在对应页面上引用相应的css/js
 

<!-- 支持引导4.x您还可以使用引导css 3.3.x版本 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.9/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
<!-- 如果使用RTL（从右到左）方向，请在fileinput.CSS之后通过在下面取消注释来加载RTL CSS文件 -->
<!-- link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.9/css/fileinput-rtl.min.css" media="all" rel="stylesheet" type="text/css" /-->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- piexif.min.js 需要自动定位图像文件，或者在重新调整大小的图像时恢复EXIF数据，而当您
希望在上载前调整图像大小。必须在fileinput.min.js之前加载 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.9/js/plugins/piexif.min.js" type="text/javascript"></script>
<!-- 仅当希望在初始预览中排序/重新排列文件时，才需要sortable.min.js。
必须在fileinput.min.js之前加载 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.9/js/plugins/sortable.min.js" type="text/javascript"></script>
<!-- 仅当您希望在预览版中净化HTML内容时才需要purify.min.js
HTML文件。必须在fileinput.min.js之前加载 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.9/js/plugins/purify.min.js" type="text/javascript"></script>
<!-- 如果使用bootstrap 4.x，则需要下面的popper.min.js。
不带popper.min.js的3.3.x版本。 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<!-- 如果希望以详细模式缩放和预览文件内容，需要使用下面的bootstrap.min.js
对话。支持引导4.x您还可以使用bootstrapJS3.3.x版本。 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" type="text/javascript"></script>
<!--主文件 fileinput plugin -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.9/js/fileinput.min.js"></script>
<!-- 主文件输入插件文件如果你需要一个像字体这样的主题，你可以包括它，如下所述 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.9/themes/fa/theme.js"></script>
<!-- 如果您的语言需要翻译，也可以选择包含如下所述的语言环境文件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.9/js/locales/(lang).js"></script>

上面是参考文献推荐的，下面是我本人项目中引用到的css/js：
 

<link href="${path}/styles/js/bootstrap-fileinput-master/css/bootstrap.min.css" rel="stylesheet">
<link href="${path}/styles/js/bootstrap-fileinput-master/css/fileinput.css" media="all" rel="stylesheet" type="text/css"/>
<link href="${path}/styles/js/bootstrap-fileinput-master/css/fileinput-rtl.css" media="all" rel="stylesheet" type="text/css"/>
<link href="${path}/styles/js/bootstrap-fileinput-master/css/font-awesome.min.css" media="all" rel="stylesheet" type="text/css"/>
<link href="${path}/styles/js/bootstrap-fileinput-master/themes/explorer-fa/theme.css" media="all" rel="stylesheet" type="text/css"/>


<script src="${path}/styles/js/bootstrap-fileinput-master/js/plugins/sortable.js" type="text/javascript"></script>
<script src="${path}/styles/js/bootstrap-fileinput-master/js/fileinput.js" type="text/javascript"></script>
<script src="${path}/styles/js/bootstrap-fileinput-master/js/locales/zh.js" type="text/javascript"></script>
<script src="${path}/styles/js/bootstrap-fileinput-master/themes/explorer-fa/theme.js" type="text/javascript"></script>
<script src="${path}/styles/js/bootstrap-fileinput-master/themes/fa/theme.js" type="text/javascript"></script>
<script src="${path}/styles/js/bootstrap-fileinput-master/js/popper.min.js" type="text/javascript"></script>
<script src="${path}/styles/js/bootstrap-fileinput-master/js/bootstrap.min.js" type="text/javascript"></script>

2、初始化插件

通过设置输入字段的数据属性直接调用插件选项，在页面引用如下：
 

<input id="input-id" type="file" class="file" data-preview-file-type="text" >

并在页面初始化方法中加载插件，如下：
 

// 默认初始化方式
$("#input-id").fileinput();

// 带插件选项的初始化方式
$("#input-id").fileinput({'showUpload':false, 'previewFileType':'any'});

上面是参考文献推荐的，下面是我本人项目中初始化方法：
 

$(function () {
    //加载上传插件
    $("#input-700").fileinput({
        maxFileCount: 5,//上传最大文件数
        uploadAsync: false, //默认异步上传
        // showRemove: true, //显示移除标题
        // showCaption: true, //是否显示标题
        // showPreview: true, //是否显示预览
        showUpload:false,//是否显示上传按钮
        dropZoneEnabled: false,//是否显示拖拽区域，会占用很大区域
        overwriteInitial:false,//是否要覆盖初始预览内容和标题设置
        language: 'zh', //语言
        initialPreviewAsData: true, //是否将初始预览内容集解析为数据而不是原始标记语言
        purifyHtml: true, //是否在预览中净化HTML内容类型显示的HTML内容
        maxFileSize:1024*10, //最大上传大小10M
        allowedFileExtensions: ['jpg','png','bmp','jpeg','txt','pdf','doc','docx','xls','xlsx','rar','zip'],//限制文件的后缀名
        // allowedFileTypes: ['image', 'html', 'text', 'video', 'audio', 'flash', 'object'],//限制文件的类型
        // allowedFileTypes: ['image','text'],//allowedFileExtensions和allowedFileTypes 只能二选一
        // layoutTemplates :{
        //     actionUpload:'',//去掉缩阅图中的上传按钮
        //     actionDelete:''//去掉缩略图中的删除按钮
        // }
    });

    //删除确认
    $("#input-700").on("filepredelete", function(jqXHR) {
        var abort = true;
        if (confirm("是否删除该图片?")) {
            abort = false;
        }
        return abort; //
    });

})

以上插件选项/未能使用到的插件选项都能在最上面提供的参考文献中查询到

 

下面展示一下插件在我项目中的展示效果：
页面加载效果（bootstrap-fileinput为表单中附件上传那块）：

以下是错误上传展示方法：

以下是正确上传展示效果：