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 %}

進階示例1

Planets and Satellites

總結

以上是生活随笔為你收集整理的flask 获取前端form内容_flask 项目中使用 bootstrapFileInput(进阶篇)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。