Bootstrap-fileinput 文件上传

Bootstrap-fileinput 官方API

input控件

//multiple可以选择多个文件
<input id="realStoreImage" name="realStoreImageList" type="file" multiple  data-preview-file-type="text" />

引入css和js文件

//css
<link href="<%=basePath %>/js/thirdsite/common/bootstrap-fileinput/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />

//js
<script src="<%=basePath %>/js/thirdsite/common/bootstrap-fileinput/js/plugins/piexif.min.js" type="text/javascript"></script>
<script src="<%=basePath %>/js/thirdsite/common/bootstrap-fileinput/js/plugins/sortable.min.js" type="text/javascript"></script>
<script src="<%=basePath %>/js/thirdsite/common/bootstrap-fileinput/js/plugins/purify.min.js" type="text/javascript"></script>
<script src="<%=basePath %>/js/thirdsite/common/bootstrap-fileinput/popper.min.js"></script>
<script src="<%=basePath %>/js/thirdsite/common/bootstrap-fileinput/js/fileinput.min.js"></script>
<script src="<%=basePath %>/js/thirdsite/common/bootstrap-fileinput/themes/fa/theme.min.js"></script>
<script src="<%=basePath %>/js/thirdsite/common/bootstrap-fileinput/js/locales/zh.js"></script>

JS 初始化和 预加载图片

 //用于图像文件
initialPreview：[
    “<img src ='/ images / desert.jpg'class ='file-preview-image'alt ='Desert'title ='Desert'>”，
    “<img src ='/ images / jellyfish.jpg'class ='file-preview-image'alt ='Jelly Fish'title ='Jelly Fish'>”，
]

//用于文本文件
initialPreview：“<div class ='file-preview-text'title ='NOTES.txt'>”+
    “这是示例文本文件内容，最多为250个字符的wrapTextLength”+
    “<span class ='wrap-indicator'onclick ='$（\”＃show-detailed-text \“）。modal（\”show \“）'title ='NOTES.txt'> [...] </ span >“+
    “</ DIV>”

//用于其他文件
initialPreview：“<div class ='file-preview-text'>”+
    “<h3> <i class ='glyphicon glyphicon-file'> </ i> </ h3>”+
    “Filename.xlsx”+“</ div>”

/**
 * 初始化 bootstrap 文件上传 图片的
 *
 * initialPreview 图片的回显
 * initialPreviewConfig 图片的回显的配置
 */
function initBootstrapFileInputImage(id,initialPreview,initialPreviewConfig)
{
    $(id).fileinput({

        //browseOnZoneClick:true,//是否在单击预览区域时启用文件浏览/选择。默认为false

        //autoReplace:false,//是否在maxFileCount达到限制后自动替换预览中的文件并选择一组新文件

        removeFromPreviewOnError:true, //当选择的文件不符合规则时，例如不是指定后缀文件、大小超出配置等，选择的文件不会出现在预览框中，只会显示错误信息

        language: 'zh', //设置语言

        allowedFileExtensions: ['jpg','jpeg', 'png'],//接收的文件后缀

        //showUploadedThumbs:true,//是否在预览窗口中持续显示上传的文件缩略图（对于ajax上传），直到按下删除/清除按钮。默认为true。设置false为时，选择上传的下一批文件将从预览中清除这些缩略图。

        uploadUrl: "", //上传的地址

        browseClass: "btn btn-primary", //按钮样式

        maxFileCount: 5, //表示允许同时上传的最大文件个数 如果设置为0，则表示允许的文件数不受限制

        minFileCount: 0, //每次多次上载允许的最小文件数。如果设置为0，则表示文件数是可选的

        enctype: 'multipart/form-data',

        showUpload:false,//不展示上传按钮 体验不好 需要用户自己点击

        validateInitialCount:true,//是否在验证minFileCount和包含初始预览文件计数（服务器上载文件）maxFileCount

        msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",

        initialPreview:initialPreview,//预览图片img

        initialPreviewConfig:initialPreviewConfig,//预览图片配置

        overwriteInitial:false,//是否在选择新图片时，把之前的预设图片删除掉

    });

}