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 内容如下:

  {% block title %}{% endblock %} {% block css %}   {% endblock %} {% block js %}                  {% endblock %}   

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

展示

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

模板内容

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

{% extends 'advanced_common/base.html' %}{% block content %}

进阶示例1

Planets and Satellites