网站设计模板简约,网站阵地建设,响应式网站设计工具,浙江常规网站建设bootstrap 为 flask 使用人员提供了一个非常优美且有效的前端页面组件,但是完美之处还存在些许缺陷,比如文件的上传功能.而 bootstrap-fileinput 是基于 bootstrap 的控件,非常完美的填补了这个空缺.注意: 本文是基于 bootstrap-fileinput v4.4.2. github 地址: https://github…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 %} {% block content %} {% 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 %}进阶示例1Planets and Satellites
