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
示例为根基举办讲解.

创造蓝图 basic

开创方法请参照 flask 项目中应用
bootstrapFileInput(构建篇)

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

构建基础 html 模板

app/basic/templates/basic_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

模板内容

app/basic/templates/example_1.html 内容如下:

{% extends 'basic_common/base.html' %}
{% block content %}
<h1>基本示例1 -- 自动展示缩略图</h1>
<label class="control-label">Select File</label>
<form method="post" role="form" enctype="multipart/form-data">
    <input id="input-1" name="input-1" type="file" class="file">
</form>

{% endblock %}
{% block title %}
    基本示例1 -- 自动展示缩略图
{% endblock %}

知识点:

  1. 亟需引入 form 表单, 并扶助文件上传, 需设置
    enctype="multipart/form-data".
  2. 是因为 flask 项目是以 html 标签的 name 属性进行精选元素, 该 input
    标签中需要安装 name 属性.
  3. class 需要设置为 ‘file’.
  4. input 标签的 type 属性要设置为 file, 以便补助文件上传.
  5. input 标签由于没有引入 multiple 属性, 故不可能兑现拔取多文本功效.

视图函数

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

# -*- coding:utf-8 -*-
__author__ = '东方鹗'

from flask import render_template, request, current_app, redirect, url_for
from . import basic
from werkzeug.utils import secure_filename
import os


def allowed_file(filename):
    ALLOWED_EXTENSIONS = set(['txt', 'pdf', 'png', 'jpg', 'jpeg', 'gif'])
    return '.' in filename and \
           filename.rsplit('.', 1)[1] in ALLOWED_EXTENSIONS


@basic.route('/example_1', methods=['GET', 'POST'])
def example_1():
    if request.method == 'POST':
        file = request.files['input-1']
        if file and allowed_file(file.filename):
            filename = secure_filename(file.filename)
            file.save(os.path.join(current_app.config['UPLOAD_FOLDER'], filename))

    return render_template('example_1.html')

知识点:

  1. allowed_file 函数是为着检查所上传的文本的格式,
    首要实现情势是因此文件后缀来判断文件的格式. 参考文档:
    http://docs.jinkan.org/docs/flask/patterns/fileuploads.html
  2. secure_filename 函数是为着让用户上传的文本的公文名更安全. 参考文档:
    http://werkzeug.pocoo.org/docs/0.12/utils/\#werkzeug.utils.secure\_filename
  3. request.files[‘input-1’] 是为着取得上传的公文的对象. 此处的
    ‘input-1’ 对应的是 html 模板中 input 标签的 name 属性.
    获取六个上传的文书需要用到 request.files.getlist(‘name属性标签’),
    可得到一个文件对象的列表.
  4. 上传的途径是在 config.py 文件中安装的 UPLOAD_FOLDER 变量.

展示

image

基础示例 2

模板内容

app/basic/templates/example_2.html 内容如下:

{% extends 'basic_common/base.html' %}
{% block content %}
<h1>基本示例2 -- 隐藏展示缩略图</h1>
<label class="control-label">Select File</label>
<form method="post" role="form" enctype="multipart/form-data">
    <input id="input-2" name="input-2" type="file" class="file"  data-show-preview="false">
</form>
{% endblock %}
{% block title %}
    基本示例2 -- 隐藏展示缩略图
{% endblock %}

知识点:

  1. data-show-preview=”false” 属性将关闭文件选用后预览的效劳,
    既缩略图效率.
  2. 落实打开/关闭文件采取后的预览效能也得以在js里开展安装:

$(document).on('ready', function() {
    $("#input-2").fileinput({
        show-preview: false
    });
});

视图函数

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

展示

image

基础示例 3

模板内容

app/basic/templates/example_3.html 内容如下:

{% extends 'basic_common/base.html' %}
{% block content %}
<h1>基本示例3 -- 利用 file input 属性控制相关选项,如本例可实现多文件上传,但不显示上传按钮</h1>
<label class="control-label">Select File</label>
<form method="post" role="form" enctype="multipart/form-data">
    <input id="input-3" name="input3[]" type="file" class="file" multiple data-show-upload="false" data-show-caption="true">
</form>
{% endblock %}
{% block title %}
    基本示例3 -- 利用 file input 属性控制相关选项,如本例可实现多文件上传,但不显示上传按钮
{% endblock %}

知识点:

  1. input 标签里有 multiple 属性, 可实现多文件采取的效用.
  2. data-show-upload=”false” 属性将不显示上传按钮, 默认为 true.
  3. data-show-caption=”true” 属性将展现采用文件的输入框, 默认为 true.
    框内将显得将要采用的文本的名称.
  4. 如出一辙可以在 js 里实现相关效率.

$(document).on('ready', function() {
    $("#input-3").fileinput({
        show-upload: false,
        show-caption: true
    });
});

视图函数

是因为没有上传按钮, 故无需处理采纳的文件. 视图函数无需改变.

展示

image

基本功示例 4

模板内容

app/basic/templates/example_4.html 内容如下:

{% extends 'basic_common/base.html' %}
{% block content %}
<h1>基本示例4 -- 设置属性为只读或不可用</h1>
<label class="control-label">Select File</label>
<label class="control-label">Readonly Input</label>
<input id="input-4a" type="file" class="file" readonly="true">
<label class="control-label">Disabled Input</label>
<input id="input-4b" type="file" class="file" disabled="true">
{% endblock %}
{% block title %}
    基本示例4 -- 设置属性为只读或不可用
{% endblock %}

知识点:

  1. 行使 readonly 或 disabled 属性, 将精选框设置为只读或不足用.

视图函数

由于不可能取舍文件, 视图函数无需改变.

展示

image

基础示例 5

模板内容

app/basic/templates/example_5.html 内容如下:

{% extends 'basic_common/base.html' %}
{% block content %}
<h1>基本示例5 -- 设置为单按钮并隐藏文件选择输入框,在上传时显示上传等待图标</h1>
<label class="control-label">Select File</label>
<form method="post" role="form" enctype="multipart/form-data">
    <input id="input-5" name="input-5[]" type="file" multiple class="file-loading">
</form>
<script>
$(document).on('ready', function() {
    $("#input-5").fileinput({showCaption: false});
});
</script>
{% endblock %}
{% block title %}
    基本示例5 -- 设置为单按钮并隐藏文件选择输入框,在上传时显示上传等待图标
{% endblock %}

知识点:

  1. 透过 js 设置 showCaption 的性能为 false. 你也得以选择data-show-caption 标签属性来设置.
  2. 在意样式类 class 此处成了 file-loading. 这是一个很积极的变动,
    表明你可以运用 ajax 提交方式来上传文件啦. 你把 html 中的 form
    表单去掉试试.

视图函数

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

...

@basic.route('/example_5', methods=['GET', 'POST'])
def example_5():
    if request.method == 'POST':
        files = request.files.getlist('input-5[]')
        for file in files:
            if file and allowed_file(file.filename):
                filename = secure_filename(file.filename)
                file.save(os.path.join(current_app.config['UPLOAD_FOLDER'], filename))

    return render_template('example_5.html')

...

知识点

  1. 利用 request.files.getlist() 来取得上传文件的目的列表.

展示

image

基础示例 6

模板内容

app/basic/templates/example_6.html 内容如下:

{% extends 'basic_common/base.html' %}
{% block content %}
<h1>基本示例6 -- 设置最大上传的文件数为10</h1>
<label class="control-label">Select File</label>
<form method="post" role="form" enctype="multipart/form-data">
    <input id="input-6" name="input6[]" type="file" multiple class="file-loading">
</form>
<script>
$(document).on('ready', function() {
    $("#input-6").fileinput({
        showUpload: false,
        maxFileCount: 10,
        mainClass: "input-group-lg"
    });
});
</script>
{% endblock %}
{% block title %}
    基本示例6 -- 设置最大上传的文件数为10
{% endblock %}

知识点:

  1. 通过 js 设置 showUpload 的特性为 false. 你也得以应用
    data-show-upload 标签属性来设置.
  2. 设置 maxFileCount 的习性为 10, 表示最多可以五遍性上传 10 个文件.
  3. 设置 mainClass 的 属性为 “input-group-lg”, 基于 bootstrap 样式.
    文件的取舍框将变大.

视图函数

是因为并未上传按钮, 故无需处理选取的文件. 视图函数无需改变.

展示

image

基本功示例 7

模板内容

app/basic/templates/example_7.html 内容如下:

{% extends 'basic_common/base.html' %}
{% block content %}
<h1>基本示例7 -- 设置允许上传的文件格式</h1>
<label class="control-label">Select File</label>
<form method="post" role="form" enctype="multipart/form-data">
    <input id="input-7" name="input-7[]" multiple type="file" class="file file-loading" data-allowed-file-extensions='["csv", "txt"]'>
</form>
{% endblock %}
{% block title %}
    基本示例7 -- 设置允许上传的文件格式
{% endblock %}

知识点:

  1. 留意样式类 class 此处成了 file-loading. 那是一个很积极的变迁,
    讲明你能够采取 ajax 提交模式来上传文件啦. 您把 html 中的 form
    表单去掉试试.
  2. data-allowed-file-extensions='[“csv”, “txt”]’
    设置上传的公文的格式只好是 csv 或 txt 二种格式

视图函数

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

...
@basic.route('/example_7', methods=['GET', 'POST'])
def example_7():
    if request.method == 'POST':
        files = request.files.getlist('input-7[]')
        for file in files:
            if file and allowed_file(file.filename):
                filename = secure_filename(file.filename)
                file.save(os.path.join(current_app.config['UPLOAD_FOLDER'], filename))

    return render_template('example_7.html')

...

知识点

  1. 此处的 allowed_file() 函数中的 ALLOWED_EXTENSIONS 变量,
    最好和前端的一致.

展示

image

基本功示例 8

模板内容

app/basic/templates/example_8.html 内容如下:

{% extends 'basic_common/base.html' %}
{% block content %}
<h1>基本示例8 -- 使用rtl样式,让文件选择按钮居左</h1>
注意:引入样式文件的时候, css/fileinput-rtl.css 必须在 the css/fileinput.css 之后引入
<div dir=rtl>
    <label class="control-label">Select File</label>
</div>
<!-- note that your input must just set the `rtl` data property of the plugin or in your javascript code -->
<form method="post" role="form" enctype="multipart/form-data">
    <input id="input-8" name="input-8[]" multiple type="file" class="file-loading">
</form>
<script>
$(document).on('ready', function() {
    $("#input-8").fileinput({
        rtl: true,
        allowedFileExtensions: ["jpg", "png", "gif"]
    });
});
</script>
{% endblock %}
{% block title %}
    基本示例8 -- 使用rtl样式,让文件选择按钮居左
{% endblock %}
{% block css %}
    {{ super() }}
    <link href="{{ url_for('lib.static',filename='css/fileinput-rtl.min.css') }}" media="all" rel="stylesheet" type="text/css" />
{% endblock %}

知识点:

  1. 小心 js 的始末, 引入了 rtl 属性, 这需要先映入
    css/fileinput-rtl.min.css 样式表, 注意 flask 模板的导入模式.
    此属性将是按钮的体裁反转.
  2. allowedFileExtensions: [“jpg”, “png”, “gif”], 是在 js
    中的设置形式.允许上传的文本的格式为 “jpg”, “png”, “gif”
    两种.你也足以运用 data 属性选项来设置,
    data-allowed-file-extensions='[“jpg”, “png”, “gif”]’.

视图函数

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

...
@basic.route('/example_8', methods=['GET', 'POST'])
def example_8():
    if request.method == 'POST':
        files = request.files.getlist('input-8[]')
        for file in files:
            if file and allowed_file(file.filename):
                filename = secure_filename(file.filename)
                file.save(os.path.join(current_app.config['UPLOAD_FOLDER'], filename))

    return render_template('example_8.html')

...

知识点

  1. 此处的 allowed_file() 函数中的 ALLOWED_EXTENSIONS 变量,
    最好和前端的一致.

展示

image

本章源代码下载:

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

相关文章

网站地图xml地图