关于Bootstrap File input插件

关于Bootstrap File input插件

最近因项目需求用到这个插件，开发过程中查资料花费了大量时间，因此总结使用方法下来防止再次使用时遗忘。
相关文档：Github地址、插件文档、DEMO

• 插件引入说明

<script type="text/javascript" src="/bootstrap-fileinput/js/fileinput.min.js"></script>
<script type="text/javascript" src="/bootstrap-fileinput/js/locales/zh.js"></script>
<script type="text/javascript" src="/bootstrap-fileinput/js/plugins/sortable.min.js" ></script> <!-- 排序时使用到，如不需要对图片进行排序，可以不加 -->
<script type="text/javascript"><{include file="../statics/js/others/fileinput_userinfo.js"}></script>

• 开发DEMO

1.HTML

<!-- HTML -->
<div class="form-group">
    <label for="awards" class="col-sm-2 control-label">获奖情况</label>
    <div class="col-sm-9">
        <input type="file" id="awards" name="awards" multiple>
        <div id="divawards" class="piclist" style=" margin:10px 0px;">
            <{if $awards}>
                <{foreach from=$awards item=list name=album}>
                    <input type="hidden" name="info[awards][{$list.id}][award_img]" value="{$list.award_img}" id="awards_{$list.id}">
                <{/foreach}>
            <{/if}>
        </div>
        <!-- JS函数引用 -->
        <script type="text/javascript" charset="utf-8" async defer>
            initFileInput("awards", "public_ajax_upload?id=awards", "public_del_awards?");
            initPortrait("awards");
        </script>
    </div>
</div>

2.JavaScript

//初始化fileinput控件（第一次初始化）
function initFileInput(ctrlName,uploadUrl,deleteUrl){
    var control = $('#' + ctrlName);  
    control.fileinput({
        language: 'zh',
        uploadUrl: "/usercenter/userinfo/" + uploadUrl,   //上传路径
        deleteUrl: "/usercenter/userinfo/" + deleteUrl,   //删除路径

        enctype: 'multipart/form-data',
        // maxFileCount: 1,                               //最大允许上传数量
        dropZoneEnabled: false,                           //是否显示拖拽区域
        showCaption: false,                               //是否显示标题
        showUpload: true,                                 //是否显示上传按钮
        showRemove:false,
        resizeImage: true,

    }).on('fileuploaded',function(event,data,key){
        if (data.response.is_success == true) {
            //上传成功操作事件（删除旧的服务器图片，修改数据库）
        } else {
            alert("上传出错！");
        }

    }).on('filepredelete', function(event, key) {           //删除前事件
        if (!confirm('确定删除该文件？')) {
            ctrlName.fileinput('cancel');   //终止操作
        }

    }).on('filedeleted', function(event, key, data) {       //删除后事件
        //删除操作事件（删除服务器图片，修改数据库）

    }).on('filesuccessremove', function(event, id, key) {   //移除上传事件
        //先上传图片后直接删除图片，未进行提交操作

    })
}

//初始化图像信息，可针对不同控件进行设置
function initPortrait(ctrlName) {
    var control = $('#' + ctrlName);
    switch(ctrlName){
        case "awards":
            var footerTemplate = '<div class="file-thumbnail-footer">\n' +
                '   <div style="margin:5px 0">\n' +
                '       <input class="kv-input kv-new form-control input-sm text-center {TAG_CSS_NEW}" name="info[insert_awards_des][][award_describe]" value="{caption}" placeholder="输入获奖详情" {NEW_SHOW}>\n' +
                '       <input class="kv-input kv-init form-control input-sm text-center {TAG_CSS_INIT}" name="info[awards][{width}][award_describe]" value="{TAG_VALUE}" key="{width}" placeholder="Enter caption..." {INIT_SHOW}>\n' +
                '   </div>\n' +
                '   {size}\n' +
                '   {actions}\n' +
                '</div>';
            //重要，需要更新控件的附加参数内容，以及图片初始化显示
            control.fileinput('refresh', {
                maxFileSize: 10485760,
                maxImageWidth: 260,
                maxImageHeight: 180,
                allowedFileExtensions : ['jpg', 'jpeg', 'png', 'gif', 'ico'],//接收的文件后缀
                overwriteInitial: false,

                layoutTemplates: {footer: footerTemplate, size: '<samp><small>({sizeText})</small></samp>'},  //设置填写的图片备注

                //初始化图片
                initialPreview: [
                    {if $awards}
                        {foreach from=$awards item=list name=album}
                            '{$list.award_img}',
                        {/foreach}
                    {/if}
                ],
                initialPreviewAsData: true,
                initialPreviewConfig: [
                    {if $awards}
                        {foreach from=$awards item=list name=album}
                            {caption: "<{$list.award_describe}>", width: "{$list.id}", key: {$list.id}},
                        {/foreach}
                    {/if}

                ],

                //新增图片的input控件配置
                previewThumbTags: {
                    '{TAG_VALUE}': '',        // no value
                    '{TAG_CSS_NEW}': '',      // new thumbnail input
                    '{TAG_CSS_INIT}': 'hide',  // hide the initial input
                    '{INIT_SHOW}': 'disabled'
                },
                //初始化图片的input控件配置
                initialPreviewThumbTags: [
                    {if $awards}
                        {foreach from=$awards item=list name=album}
                            {'{TAG_VALUE}': '{$list.award_describe}', '{TAG_CSS_NEW}': 'hide', '{TAG_CSS_INIT}': '', '{NEW_SHOW}': 'disabled'},
                        {/foreach}
                    {/if}
                ],

            });
        break;
    }
}

• 预览
  

• 注意

  1. input 按钮必须要有 multiple，否则无法多图上传，而且上传第二张图片时，第一张图片会被覆盖；

<input type="file" id="awards" name="awards" multiple>