bootstrap 为 flask
使用人口提供了一个异常雅观且实用的前端页面组件,不过完美之处还设有多少瑕疵,比如文件的上传功用.而
bootstrap-fileinput 是依据 bootstrap 的控件,很是系数的填补了这一个空缺.

注意: 本文是基于 bootstrap-fileinput v4.4.2. github 地址:
https://github.com/kartik-v/bootstrap-fileinput

注意: 本文是重倘诺以
http://plugins.krajee.com/file-input/demo
示例为底蕴举行讲解.

始建蓝图 advanced

创设方法请参照 flask 项目中行使
bootstrapFileInput(构建篇)

中 lib 蓝图的创导方法,此处不在赘述.

构建基础 html 模板

app/advanced/templates/advanced_common/base.html 内容如下:

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <meta name="description" content="">
        <meta name="author" content="">
        <link rel="icon" href="{{ url_for('lib.static', filename='favicon.ico')}}">

        <title>{% block title %}{% endblock %}</title>
        {% block css %}
            <!-- 新 Bootstrap 核心 CSS 文件 -->
            <link rel="stylesheet" href="{{ url_for('lib.static', filename='css/bootstrap.min.css') }}">

            <!-- 可选的Bootstrap主题文件(一般不用引入) -->
            <link rel="stylesheet" href="{{ url_for('lib.static', filename='css/bootstrap-theme.min.css') }}">

            <!-- 个性化主题文件 -->
            <!-- font-awesome样式主题文体 -->
            <link href="{{ url_for('lib.static',filename='css/font-awesome.css') }}" media="all" rel="stylesheet" type="text/css" />
            <!-- fileinput样式主题文体 -->
            <link href="{{ url_for('lib.static',filename='css/fileinput.min.css') }}" media="all" rel="stylesheet" type="text/css" />
        {% endblock %}

        {% block js %}
            <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
            <script src="{{ url_for('lib.static', filename='js/jquery.min.js') }}"></script>

            <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
            <script src="{{ url_for('lib.static', filename='js/bootstrap.min.js') }}"></script>

            <!-- 个性化 js 文件 -->
            <!-- piexif.min.js is only needed if you wish to resize images before upload to restore exif data.
             This must be loaded before fileinput.min.js -->
            <script src="{{ url_for('lib.static',filename='js/plugins/piexif.min.js') }}" type="text/javascript"></script>
            <!-- sortable.min.js is only needed if you wish to sort / rearrange files in initial preview.
                 This must be loaded before fileinput.min.js -->
            <script src="{{ url_for('lib.static',filename='js/plugins/sortable.min.js') }}" type="text/javascript"></script>
            <!-- purify.min.js is only needed if you wish to purify HTML content in your preview for HTML files.
                 This must be loaded before fileinput.min.js -->
            <script src="{{ url_for('lib.static',filename='js/plugins/purify.js') }}" type="text/javascript"></script>
            <!-- the main fileinput plugin file -->
            <script src="{{ url_for('lib.static',filename='js/fileinput.min.js') }}"></script>
            <!-- optionally if you need a theme like font awesome theme you can include
                it as mentioned below -->
            <script src="{{ url_for('lib.static',filename='js/themes/fa/theme.min.js') }}"></script>
            <!-- optionally if you need translation for your language then include
                locale file as mentioned below -->
            <script src="{{ url_for('lib.static',filename='js/locales/zh.js') }}"></script>

        {% endblock %}
    </head>

    <body>
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-sm-offset-2">
                    <div class="col-xs-12 col-sm-8">
                        {% block content %}

                        {% endblock %}
                    </div>
                </div>
            </div><!--/row-->
        </div><!--/.container-->
    </body>
</html>

base.html 模板引入 css 和 js 时的多少个坑

留神 css 和 js 文件的导入顺序

  • 第一需要导入的 js 文件是 jquery.js.
  • 其次索要导入 bootstrap 相关的 css 和 js.
  • 其三亟待导入 fileinput 相关的 css 和 js, 请注意项目中的注释,
    相关的公文导入也需要有先后顺序的要求.

瞩目版本问题

  • 此项目所需的 jquery 是 jQuery v2.1.1.
  • 此项目所需的 bootstrap 是 v3.3.7 版本
  • 此项目所需的 fileinput 是 v4.4.2 的版本.

其他版本可能会有所不同.

瞩目 fileinput 使用格局

fileinput 有二种采用情势,一种是应用 form 提交,一种是 ajax 格局提交.其中
ajax 提交模式,需要从 js 中展开安装, 并将类样式 class 设置为
file-loading. 而非 ajax 提交形式亟待引入 form 表单, 类样式 class
需设置为 file, 本基础示例都亟待引入 form 表单.

进阶示例 1

展示

image

从该图的右下角可以清楚的看看, 这一个 form data 里裹夹着数量 key: 2.
那么我们用 flask 写视图函数的时候,就足以用到那么些 key 值.

模板内容

app/advanced/templates/exam_1.html 内容如下:

{% extends 'advanced_common/base.html' %}
{% block content %}
<h1>进阶示例1</h1>
<label class="control-label">Planets and Satellites</label>
<input id="input-24" name="input24[]" type="file" multiple class="file-loading">
<script>
$(document).on('ready', function() {
    $("#input-24").fileinput({
        initialPreview: [
            'http://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/FullMoon2010.jpg/631px-FullMoon2010.jpg',
            'http://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Earth_Eastern_Hemisphere.jpg/600px-Earth_Eastern_Hemisphere.jpg'
        ],
        initialPreviewAsData: true,
        initialPreviewConfig: [
            {caption: "Moon.jpg", size: 6930321, width: "120px", key: 1},
            {caption: "Earth.jpg", size: 1218822, width: "120px", key: 2}
        ],
        deleteUrl: "{{ url_for('advanced.delete') }}",
        overwriteInitial: false,
        maxFileSize: 100,
        initialCaption: "进阶示例第一例"
    });
});
</script>
<hr>
<p>
    设置最大的文件上传大小为 100K . 展示服务器上的图片内容,实现 finder 功能. 设置 <code>overwriteInitial</code> 为 <code>false</code>, 新选择的文件不会覆盖原有文件.
</p>
{% endblock %}
{% block title %}
    进阶示例1
{% endblock %}

知识点

  1. html 模板的名称最好在总体项目中,也就是享有的蓝图中都独具唯一性.
  2. 模板中的 js 代码有多种写法, 详细内容请见:
    http://plugins.krajee.com/file-input\#options
  3. 请留意 js 代码中的 deleteUrl 项, 此处有多种写法. 请参阅第二点之后,
    采用切合自己的方法.
  4. 请大胆的设想, 尽管此示例实际上已享有 finder
    的影子.你可以实现文件上传, 删除, 更新, 呈现等具有你能设想的效能.
  5. initialPreviewAsData 项, 假若设置为 false,
    将不会来得图片,而只会体现图片链接, 假诺设置为 true, 则展示图片.
  6. overwriteInitial 项, 是设置是否覆盖原有的已上传项.
  7. maxFileSize 项, 上传文件的最大大小.
  8. initialCaption 项, 初叶化 input 选拔框内的内容.

视图函数

app/advanced/views.py 内容如下:

@advanced.route('/delete', methods=['GET', 'POST'])
def delete():
    key = request.form.get('key')
    print key

    return jsonify()


@advanced.route('/example_1', methods=['GET', 'POST'])
def example_1():

    return render_template('exam_1.html')

知识点

  1. 率先个 url 函数是实现了文本的去除功效. 其中的
    request.form.get('key') 就是为着取得 ajax 提交的 form data 的值,
    也就是示意图中右下角所出示的内容.
  2. 其次个 url 函数实现了上传功效的页面.

进阶示例 2

该示例仅仅是把 js 中的 overwriteInitial 项设置成了 true,
采纳新文件的时候, 将会覆盖原有的文件.

进阶示例 3

模板内容

app/advanced/templates/exam_3.html 内容如下:

{% extends 'advanced_common/base.html' %}
{% block content %}
<h1>进阶示例3</h1>
<label class="control-label">Select File</label>
<input id="input-20" type="file" class="file-loading">
<script>
$(document).on('ready', function() {
    $("#input-20").fileinput({
        browseClass: "btn btn-primary btn-block",
        showCaption: false,
        showRemove: false,
        showUpload: false
    });
});
</script>
{% endblock %}
{% block title %}
    进阶示例3
{% endblock %}

知识点

  1. browseClass 项, 用来设置上传按钮的样式.
  2. showCaption 项, 用来设置是否展现文件拔取 input 框.
  3. showRemove 项, 用来设置是否出示删除按钮.
  4. showUpload 项, 用来设置是否出示上传按钮.
  5. 该示例仅仅呈现选拔文件按钮, 仅此而已.

视图函数

views.py 视图函数和示例1基本相同,不在赘述.

进阶示例 4

模板内容

app/advanced/templates/exam_4.html 内容如下:

{% extends 'advanced_common/base.html' %}
{% block content %}
<h1>进阶示例4</h1>
<label class="control-label">Select File</label>
<input id="input-21" type="file" accept="image/*" class="file-loading">
<script>
$(document).on('ready', function() {
    $("#input-21").fileinput({
        previewFileType: "image",
        browseClass: "btn btn-success",
        browseLabel: "Pick Image",
        browseIcon: "<i class=\"glyphicon glyphicon-picture\"></i> ",
        removeClass: "btn btn-danger",
        removeLabel: "Delete",
        removeIcon: "<i class=\"glyphicon glyphicon-trash\"></i> ",
        uploadClass: "btn btn-info",
        uploadLabel: "Upload",
        uploadIcon: "<i class=\"glyphicon glyphicon-upload\"></i> "
    });
});
</script>
{% endblock %}
{% block title %}
    进阶示例4
{% endblock %}

知识点

  1. accept=”image/*”, input 标签中的属性, 表示只好接纳图片文件.
  2. previewFileType: image 设置要挑选的文件格式是图片格式.
  3. 其他的都是为了设置各样按钮的体裁, 可以随心所欲组合.

视图函数

views.py 视图函数和示例1基本相同,不在赘述.

进阶示例 5

模板内容

app/advanced/templates/exam_5.html 内容如下:

{% extends 'advanced_common/base.html' %}
{% block content %}
<h1>进阶示例5</h1>
<label class="control-label">Select File</label>
<input id="input-22" name="input22[]" type="file" class="file-loading" accept="text/plain" multiple>
<script>
$(document).on('ready', function() {
    $("#input-22").fileinput({
        previewFileType: "text",
        allowedFileExtensions: ["txt", "md", "ini", "text"],
        previewClass: "bg-warning"
    });
});
</script>
{% endblock %}
{% block title %}
    进阶示例5
{% endblock %}

知识点

  1. previewFileType: “text” 设置要挑选的文件格式是文件格式.
  2. allowedFileExtensions 设置可以经受上传的集粤语件的格式,
    具有阐明功效.
  3. previewClass 预览框的背景样式.

视图函数

views.py 视图函数和示例1基本相同,不在赘述.

进阶示例 6

模板内容

app/advanced/templates/exam_6.html 内容如下:

{% extends 'advanced_common/base.html' %}
{% block content %}
<h1>进阶示例6</h1>
<label class="control-label">Select File</label>
<input id="input-23" name="input23[]" type="file" multiple class="file-loading">
<script>
$(document).on('ready', function() {
    $("#input-23").fileinput({
        showUpload: false,
        layoutTemplates: {
            main1: "{preview}\n" +
            "<div class=\'input-group {class}\'>\n" +
            "   <div class=\'input-group-btn\'>\n" +
            "       {browse}\n" +
            "       {upload}\n" +
            "       {remove}\n" +
            "   </div>\n" +
            "   {caption}\n" +
            "</div>"
        }
    });
});
</script>
{% endblock %}
{% block title %}
    进阶示例6
{% endblock %}

知识点

  1. showUpload: false. 不出示上传按钮.
  2. layoutTemplates. 用于安装文件上传插件的样式. 详见
    http://plugins.krajee.com/file-input\#options
    的 layoutTemplates 项.

视图函数

views.py 视图函数和示例1基本相同,不在赘述.

进阶示例 7

模板内容

app/advanced/templates/exam_7.html 内容如下:

{% extends 'advanced_common/base.html' %}
{% block content %}
<h1>进阶示例7</h1>
<label class="control-label">Select File</label>
<input id="input-40" name="input40[]" type="file" class="file" multiple>
<br>
<button type="button" class="btn btn-warning btn-modify">Modify</button>
<script>
$(document).on('ready', function() {
    $(".btn-modify").on("click", function() {
        var $btn = $(this), $input = $("#input-40");
        if ($btn.text() == "Modify") {
            $("#input-40").fileinput("disable").fileinput("refresh", {showUpload: false});
            $btn.html("Revert");
            alert("Hurray! I have disabled the input and hidden the upload button.");
        }
        else {
            $("#input-40").fileinput("enable").fileinput("refresh", {showUpload: true});
            $btn.html("Modify");
            alert("Hurray! I have reverted back the input to enabled with the upload button.");
        }
    });
});
</script>
<br>
<p>
    调用插件方法, 点击 modify 按钮来打开获关闭插件功能.
</p>
{% endblock %}
{% block title %}
    进阶示例7
{% endblock %}

知识点

  1. $(“#input-40”).fileinput(“disable”).fileinput(“refresh”,
    {showUpload: false}); 其中,第一个 fileinput(“disable”)
    的效用是让文件上传插件不可用. 第二个 fileinput(“refresh”,
    {showUpload: false}) 的功力是不出示上传预览模板.
  2. 只要只调用第一个 fileinput(“disable”), 将只是倒闭文件上传插件,
    如若你已经挑选了文件, 已有预览效果图, 则不停歇预览效果图.

视图函数

views.py 视图函数和示例1基本相同,不在赘述.

进阶示例 8

模板内容

app/advanced/templates/exam_8.html 内容如下:

{% extends 'advanced_common/base.html' %}
{% block content %}
<h1>进阶示例8</h1>
<label class="control-label">Select File</label>
<input id="input-41" name="input41[]" type="file" multiple class="file-loading">
<script>
$(document).on('ready', function() {
    $("#input-41").fileinput({
        maxFileCount: 10,
        allowedFileTypes: ["image", "video"]
    });
});
</script>
<br>
<p>
    仅仅允许上传的文件为图片和视频. 最大上传的文件数是 10.
</p>
{% endblock %}
{% block title %}
    进阶示例8
{% endblock %}

知识点

  1. allowedFileTypes: [“image”, “video”] 插件的辨证功效,
    仅仅允许上传的文本为图片和视频. 能够将 “image”, “video” 换成 “text”
    试试.

视图函数

views.py 视图函数和示例1基本相同,不在赘述.

进阶示例 9

模板内容

app/advanced/templates/exam_9.html 内容如下:

<label class="control-label">Select File</label>
<input id="input-42" name="input42[]" type="file" multiple class="file-loading">
<script>
$(document).on('ready', function() {
    $("#input-42").fileinput({
        maxFileCount: 10,
        allowedFileExtensions: ["jpg", "gif", "png", "txt"]
    });
});
</script>

知识点

  1. allowedFileExtensions 插件的认证效率, 仅仅允许上传后缀为 “jpg”,
    “gif”, “png”, “txt” 的文件.

视图函数

views.py 视图函数和示例1基本相同,不在赘述.

进阶示例 10

模板内容

app/advanced/templates/exam_10.html 内容如下:

{% extends 'advanced_common/base.html' %}
{% block content %}
<h1>进阶示例10</h1>
<label class="control-label">Select File</label>
<input id="input-43" name="input43[]" type="file" multiple class="file-loading">
<div id="errorBlock" class="help-block"></div>
<script>
$(document).on('ready', function() {
    $("#input-43").fileinput({
        showPreview: false,
        allowedFileExtensions: ["jpg", "jpeg", "gif", "png"],
        elErrorContainer: "#errorBlock"
    });
});
</script>
<br>
<p>
    仅仅允许上传后缀为 "jpg", "gif", "png", "txt" 的文件. 不显示文件预览功能. 且设置错误提示的显示位置.
</p>
{% endblock %}
{% block title %}
    进阶示例10
{% endblock %}

知识点

  1. showPreview: false, 不展现文件的预览功效.
  2. elErrorContainer: “#errorBlock”. 设置 id 为 errorBlock
    的区域来显示错误提醒.

视图函数

views.py 视图函数和示例1基本相同,不在赘述.

进阶示例 11

模板内容

app/advanced/templates/exam_11.html 内容如下:

<label class="control-label">Select File</label>
<input id="input-44" name="input44[]" type="file" multiple class="file-loading">
<script>
$(document).on('ready', function() {
    $("#input-44").fileinput({
        uploadUrl: '/file-upload-batch/2',
        maxFilePreviewSize: 10240
    });
});
</script>

知识点

  1. uploadUrl 设置上传文件的链接. 此处请参阅 flask 项目中运用
    bootstrapFileInput(基础篇)

    中的视图函数内容.
  2. maxFilePreviewSize: 10240 验证功用, 设置预览的文件的分寸最大为 10M.

视图函数

views.py 视图函数和示例1基本相同,不在赘述.

本章源代码下载:

jQuery,<a class=”btn btn-primary”
href=”https://github.com/eastossifrage/bootstrapFileInput/archive/v1.3.zip"&gt;zip压缩包&lt;/a&gt;
<a class=”btn btn-primary”
href=”https://github.com/eastossifrage/bootstrapFileInput/archive/v1.3.tar.gz"&gt;tar.gz压缩包&lt;/a&gt;

相关文章

网站地图xml地图