{% extends "base.html" %}

{% block head %}
    {{ super() }}
    <link href="/static/css/fileinput.css" media="all" rel="stylesheet" type="text/css" />
    <script src="/static/js/canvas-to-blob.min.js" type="text/javascript"></script>
    <script src="/static/js/sortable.min.js" type="text/javascript"></script>
    <script src="/static/js/purify.min.js" type="text/javascript"></script>
    <script src="/static/js/fileinput.js"></script>
    <script src="/static/js/zh.js"></script>
    <script src="/static/js/pt-BR.js"></script>
    <script src="/static/js/theme.js"></script>
    <script src="/static/js/LANG.js"></script>
    <script type="application/javascript">
        function initFileInput(ctrlName, uploadUrl) {
            var control = $('#' + ctrlName);

            control.fileinput({
                language: 'zh', //设置语言
                uploadUrl: uploadUrl, //上传的地址
                allowedFileExtensions : ['pdf'],//接收的文件后缀
                showRemove: false,
                showZoom: false,
{#                showUpload: false, //是否显示上传按钮#}
                showCaption: false,//是否显示标题
                browseClass: "btn btn-primary", //按钮样式
                previewFileIconSettings: {
                    'pdf': '<i class="fa fa-file-pdf-o text-danger"></i>'
                }
            });
        }
    </script>
{% endblock %}

{% block title %}
    文件上传demo
{% endblock %}

{% block body %}
    {{ super() }}
    {% for message in get_flashed_messages() %}
         <div class="alert alert-warning">
             <button type="button" class="close" data-dismiss="alert">&times;</button>
             {{ message }}
         </div>
     {% endfor %}
    <div class="cover-container">
        <div class="row">
            <div class="col-lg-9 col-lg-offset-2 div_head_style">
                <div class="header">
                    <ul class="nav nav-pills pull-right" role="tablist">
                        <li role="presentation" class="active"><a href="#">项目1</a></li>
                        <li role="presentation"><a href="#">项目2</a></li>
                        <li role="presentation"><a href="#">项目3</a></li>
                        <li role="presentation"><a href="#">项目4</a></li>
                    </ul>
                    <h3 class="text-muted">文件上传</h3>
                </div>
                <div style="width:50%; padding-top: 5%">
                    <label class="control-label">Select File</label>
                    <input id="file-Portrait" type="file" class="file" data-preview-file-type="text">
                    <script>
                        initFileInput("file-Portrait", "/api/upload");
                    </script>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
