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 内容如下:
{% 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
模闆内容
app/basic/templates/example_1.html 内容如下:
{% extends 'basic_common/base.html' %}
{% block content %}
基本示例1 -- 自動展示縮略圖
Select File
{% endblock %}
{% block title %}
基本示例1 -- 自動展示縮略圖
{% endblock %}
知識點:
- 需要引入 form 表單, 并支援檔案上傳, 需設定 enctype="multipart/form-data".
- 由于 flask 項目是以 html 标簽的 name 屬性進行選擇元素, 該 input 标簽中需要設定 name 屬性.
- class 需要設定為 'file'.
- input 标簽的 type 屬性要設定為 file, 以便支援檔案上傳.
- 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')
知識點:
- allowed_file 函數是為了檢查所上傳的檔案的格式, 主要實作方法是通過檔案字尾來判斷檔案的格式. 參考文檔:http://docs.jinkan.org/docs/flask/patterns/fileuploads.html
- secure_filename 函數是為了讓使用者上傳的檔案的檔案名更安全. 參考文檔: http://werkzeug.pocoo.org/docs/0.12/utils/#werkzeug.utils.secure_filename
- request.files['input-1'] 是為了獲得上傳的檔案的對象. 此處的 'input-1' 對應的是 html 模闆中 input 标簽的 name 屬性. 擷取多個上傳的檔案需要用到 request.files.getlist('name屬性标簽'), 可得到一個檔案對象的清單.
- 上傳的路徑是在 config.py 檔案中設定的 UPLOAD_FOLDER 變量.
展示
基礎示例 2
模闆内容
app/basic/templates/example_2.html 内容如下:
{% extends 'basic_common/base.html' %}
{% block content %}
基本示例2 -- 隐藏展示縮略圖
Select File
{% endblock %}
{% block title %}
基本示例2 -- 隐藏展示縮略圖
{% endblock %}
知識點:
- data-show-preview="false" 屬性将關閉檔案選擇後預覽的功能, 既縮略圖功能.
- 實作打開/關閉檔案選擇後的預覽功能也可以在js裡進行設定:
$(document).on('ready', function() {
$("#input-2").fileinput({
show-preview: false
});
});
視圖函數
views.py 視圖函數和示例1基本相同,不在贅述.
展示
基礎示例 3
模闆内容
app/basic/templates/example_3.html 内容如下:
{% extends 'basic_common/base.html' %}
{% block content %}
基本示例3 -- 利用 file input 屬性控制相關選項,如本例可實作多檔案上傳,但不顯示上傳按鈕
Select File
{% endblock %}
{% block title %}
基本示例3 -- 利用 file input 屬性控制相關選項,如本例可實作多檔案上傳,但不顯示上傳按鈕
{% endblock %}
知識點:
- input 标簽裡有 multiple 屬性, 可實作多檔案選擇的功能.
- data-show-upload="false" 屬性将不顯示上傳按鈕, 預設為 true.
- data-show-caption="true" 屬性将顯示選擇檔案的輸入框, 預設為 true. 框内将顯示将要選擇的檔案的名稱.
- 同樣可以在 js 裡實作相關功能.
$(document).on('ready', function() {
$("#input-3").fileinput({
show-upload: false,
show-caption: true
});
});
視圖函數
由于沒有上傳按鈕, 故無需處理選擇的檔案. 視圖函數無需改變.
展示
基礎示例 4
模闆内容
app/basic/templates/example_4.html 内容如下:
{% extends 'basic_common/base.html' %}
{% block content %}
基本示例4 -- 設定屬性為隻讀或不可用
Select File
Readonly Input
Disabled Input
{% endblock %}
{% block title %}
基本示例4 -- 設定屬性為隻讀或不可用
{% endblock %}
知識點:
- 利用 readonly 或 disabled 屬性, 将選擇框設定為隻讀或不可用.
視圖函數
由于無法選擇檔案, 視圖函數無需改變.
展示
基礎示例 5
模闆内容
app/basic/templates/example_5.html 内容如下:
{% extends 'basic_common/base.html' %}
{% block content %}
基本示例5 -- 設定為單按鈕并隐藏檔案選擇輸入框,在上傳時顯示上傳等待圖示
Select File
{% endblock %}
{% block title %}
基本示例5 -- 設定為單按鈕并隐藏檔案選擇輸入框,在上傳時顯示上傳等待圖示
{% endblock %}
知識點:
- 通過 js 設定 showCaption 的屬性為 false. 你也可以使用 data-show-caption 标簽屬性來設定.
- 注意樣式類 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')
...
知識點
- 使用 request.files.getlist() 來擷取上傳檔案的對象清單.
展示
基礎示例 6
模闆内容
app/basic/templates/example_6.html 内容如下:
{% extends 'basic_common/base.html' %}
{% block content %}
基本示例6 -- 設定最大上傳的檔案數為10
Select File
{% endblock %}
{% block title %}
基本示例6 -- 設定最大上傳的檔案數為10
{% endblock %}
知識點:
- 通過 js 設定 showUpload 的屬性為 false. 你也可以使用 data-show-upload 标簽屬性來設定.
- 設定 maxFileCount 的屬性為 10, 表示最多可以一次性上傳 10 個檔案.
- 設定 mainClass 的 屬性為 "input-group-lg