下载地点、API和DOM地点（英语好的小伙伴能够看看）

下载地点：https://github.com/kartik-v/b…
API文档 ：http://plugins.krajee.com/fil…
D E M O：http://plugins.krajee.com/fil…

做项目用到bootstrap fileinput插件上传文件，在用的过程当中，碰到一些问题，所以想着整顿一份比较细致的文档，轻易本身以后运用，也愿望能给人人带来协助，若有毛病，愿望人人主动斧正，主动交换。
注重：第三部份内容由于存在i标签，某些笔墨被转换成图标

一、引入文件

<link href=”../css/bootstrap.min.css”rel=”stylesheet”>
<link href=”../css/fileinput.css” media=”all”rel=”stylesheet” type=”text/css” />
<scriptsrc=”../js/jquery-2.0.3.min.js”></script>
<script src=”../js/fileinput.js”type=”text/javascript”></script>
<script src=”../js/bootstrap.min.js”type=”text/javascript”></script>

二、初始化设置

//初始化fileinput
initFileInput();
function initFileInput() {
    $("#uploadImg").fileinput({
        language: 'zh', //设置言语
        dropZoneTitle: '能够将图片拖放到这里 …支撑多文件上传',
        uploadUrl: "index.php", //上传的地点
        uploadExtraData: function(previewId, index) {   //该插件能够向您的服务器要领发送附加数据。这能够经由过程uploadExtraData在键值对中设置为关联数组对象来完成。所以假如你有设置uploadExtraData={id:'kv-1'}，在PHP中你能够读取这些数据$_POST['id']
            var id = $('#id').val();
            return {seriesId: id};
        },
        allowedFileExtensions: ['jpg','png'],//吸收的文件后缀
        uploadAsync: true, //默许异步上传
        showUpload: true, //是不是显现上传按钮
        showRemove: true, //显现移除按钮
        showPreview: true, //是不是显现预览
        showCancel:true,   //是不是显现文件上传作废按钮。默许为true。只要在AJAX上传过程当中，才会启用和显现
        showCaption: true,//是不是显现文件题目，默许为true
        browseClass: "btn btn-primary", //文件挑选器/阅读按钮的CSS类。默许为btn btn-primary
        dropZoneEnabled: true,//是不是显现拖拽地区
        minImageWidth: 50, //图片的最小宽度
        minImageHeight: 50,//图片的最小高度
        maxImageWidth: 1000,//图片的最大宽度
        maxImageHeight: 1000,//图片的最大高度
        maxFileSize: 1024,//单元为kb，假如为0示意不限定文件大小
        minFileCount: 1, //每次上传许可的起码文件数。假如设置为0，则示意文件数是可选的。默许为0
        maxFileCount: 0, //每次上传许可的最大文件数。假如设置为0，则示意许可的文件数是无限定的。默许为0
        previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",//当检测到用于预览的不可读文件范例时，将在每一个预览文件缩略图中显现的图标。默许为<i class="glyphicon glyphicon-file"></i>  
        layoutTemplates:{
            actionUpload:''//去除上传预览缩略图中的上传图片
            actionZoom:'',   //去除上传预览缩略图中的检察概况预览的缩略图标
            actionDownload:'' //去除上传预览缩略图中的下载图标
            actionDelete:'', //去除上传预览的缩略图中的删除图标
        },//对象用于衬着规划的每一个部份的模板设置。您能够设置以下模板来掌握窗口小部件规划.eg:去除上传图标
        msgFilesTooMany: "挑选上传的文件数目({n}) 凌驾许可的最大数值{m}！",//字符串，当文件数凌驾设置的最大计数时显现的音讯 maxFileCount。默许为：挑选上传的文件数（{n}）超越了许可的最大限定{m}。请重试您的上传！
    }).on('filebatchpreupload', function(event, data) { //该要领将在上传之前触发
        var id = $('#id option:selected').val();
        if(id == 0){
            return {
                message: "请挑选", // 考证毛病信息在上传前要显现。假如设置了这个设置，插件会在调用时自动中断上传，并将其显现为毛病音讯。您能够运用此属性来读取文件并实行本身的自定义考证
                data:{} // any other data to send that can be referred in `filecustomerror`
            };
        }
    });
}
//fileuploaded此事宜仅针对ajax上传触发，并在每一个缩略图文件上传完成后触发。此事宜仅针对ajax上传并在以下情况下触发：当点击每一个预览缩略图中的上传图标而且文件上传胜利时，或许当你有 uploadAsync设置为true您已触发批量上传。在这类情况下，fileuploaded每一个人挑选的文件被上传胜利后，触发事宜。
var id_str = '';
$('#uploadImg').on('fileuploaded', function(event, data, previewId, index) {
    if(typeof(data.response.id) != 'undefined'){
        id_str = id_str+data.response.id+',';
    }
});
// filebatchuploadcomplete此事宜仅在ajax上传和完成同步或异步ajax批量上传后触发。
$('#uploadImg').on('filebatchuploadcomplete',function (event,files,extra) {
    if(id_str.length == 0){
        layer.msg('上传失利', {icon: 0});//弹框提醒
        return false;
    }
    setTimeout(function(){ //实行延时封闭
        closeSelf();
    },1000);
});

三、Options 申明

四、提醒申明设置

五、Method申明