Bootstrap File Input introduce

official website：
http://plugins.krajee.com/file-input

quote file:
css:

 <link href="statics/css/bootstrap.min.css" rel="stylesheet">
                <link href="statics/css/fileinput.css" media="all" rel="stylesheet" type="text/css" />

js：

 <script src="statics/js/jquery-2.1.4.min.js"></script>
             <script src="statics/js/bootstrap.min.js"></script>
             <script src="statics/js/fileinput.js" type="text/javascript"></script>

usage：
HTML:

 <div class="modal fade" id="updateImgModal" tabindex="-1" role="dialog"
         aria-labelledby="updateImgModalLabel" aria-hidden="true" style="overflow: scroll">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times" style="color: red;"></i></button>
                    <h4 class="modal-title" id="updateImgModalLabel" onclick="addImgUpdate();">上传母板</h4>
                </div>
                <div class="modal-body">
                    <div class="panel panel-info">
                        <div class="panel-heading">
                            母板信息
                        </div>
                        <div class="panel-body">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">请选择母板：</label>
                                    <div class="col-sm-9">
                                        <input id="file_upload" name="file" type="file"  multiple  class="file-loading"   >
                                    </div>
                                </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i>关闭</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

JS relation option:

function addImgUpdate() {

           //绑定回调方法fileuploaded见文档,返回的json数据里好像要有success这个方法才能被调用。
           $("#file_upload").on('fileuploaded', function(event, data, previewId, index) {
               //data格式见文档，可以接收后台map 转json后的值 
               response = data.response;
               //业务相关方法，可以忽略
               $("#cmpath").val(response.msg);
               $("#updateImgModal").modal('hide');
           });

           $("#file_upload").fileinput({
               language: "zh",
               //接收文件类型，这里为excel,可以有多个
               previewFileType:   ["xls"，"自己需要的类型"],
               //允许可见文件扩展名
               allowedFileExtensions: ["xls"],
//               elPreviewImage:false,
                //允许最大数量
               maxFileCount: 1,
               //不为空
               required:true,
            //上传地址   uploadUrl:"mvc/safeCheck/c_m_upload/"+"?"+Math.random()+".json",
               //开启异步
               uploadAsync: true,
               //必需
               enctype: 'multipart/form-data',
               browseClass: "btn btn-success",
               browseLabel: "选择excel母板",
               browseIcon: "<i class=\"glyphicon glyphicon-picture\"></i> ",
               removeClass: "btn btn-danger",
               removeLabel: "删除",
               removeIcon: "<i class=\"glyphicon glyphicon-trash\"></i> ",
               uploadClass: "btn btn-info",
               uploadLabel: "点击上传",
               uploadIcon: "<i class=\"glyphicon glyphicon-upload\"></i> ",
           });
;

           $("#updateImgModal").modal('show');
       }

Results show：

本文只是从实际项目入手讲解，不够系统全面，如想更好使用建议参考官方文档。