bootstrap 為 flask 使用人員提供了一個非常優美且有效的前端頁面元件,但是完美之處還存在些許缺陷,比如檔案的上傳功能.而 bootstrap-fileinput 是基於 bootstrap 的控制元件,非常完美的填補了這個空缺.

注意: 本文是基於 bootstrap-fileinput v4.4.2. github 地址:

注意: 本文是主要是以 示例為基礎進行講解.

建立藍圖 advanced

建立方法請參照 flask 專案中使用 bootstrapFileInput(構建篇) 中 lib 藍圖的建立方法,此處不在贅述.

構建基礎 html 模板

app/advanced/templates/advanced_common/base.html 內容如下:

html>
    
        
        
        
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --&gt
        
        
        

        
        {% block css %}            <!-- 新 Bootstrap 核心 CSS 檔案 --&gt
            

            <!-- 可選的Bootstrap主題檔案（一般不用引入） --&gt
            

            <!-- 個性化主題檔案 --&gt
            <!-- font-awesome樣式主題文體 --&gt
            
            <!-- fileinput樣式主題文體 --&gt
            
        {% endblock %}

        {% block js %}            <!-- jQuery檔案。務必在bootstrap.min.js 之前引入 --&gt
            


            <!-- 最新的 Bootstrap 核心 JavaScript 檔案 --&gt
            


            <!-- 個性化 js 檔案 --&gt
            <!-- 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 --&gt
            

            <!-- sortable.min.js is only needed if you wish to sort / rearrange files in initial preview.
                 This must be loaded before fileinput.min.js --&gt
            

            <!-- 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 --&gt
            

            <!-- the main fileinput plugin file --&gt
            

            <!-- optionally if you need a theme like font awesome theme you can include
                it as mentioned below --&gt
            

            <!-- optionally if you need translation for your language then include
                locale file as mentioned below --&gt
            


        {% endblock %}    

    
        

            

                

                    

                        {% block content %}

                        {% endblock %}                    
                
            
<!--/row--&gt
        
<!--/.container--&gt
    

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

展示

image

從該圖的右下角可以清晰的看到, 這個 form data 裡裹夾著資料 key: 2. 那麼我們用 flask 寫檢視函式的時候,就可以用到這個 key 值.

模板內容

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

{% extends 'advanced_common/base.html' %}
{% block content %}
進階示例1
Planets and Satellites

    設定最大的檔案上傳大小為 100K . 展示伺服器上的圖片內容,實現 finder 功能. 設定 overwriteInitial 為 false, 新選擇的檔案不會覆蓋原有檔案.
{% endblock %}
{% block title %}
    進階示例1
{% endblock %}

知識點

1. html 模板的名稱最好在整個專案中,也就是所有的藍圖中都具有唯一性.

2. 模板中的 js 程式碼有多種寫法, 詳細內容請見:

3. 請注意 js 程式碼中的 deleteUrl 項, 此處有多種寫法. 請參閱第二點之後, 選擇適合自己的方法.

4. 請大膽的想象, 如果此示例實際上已具有 finder 的影子.你可以實現檔案上傳, 刪除, 更新, 展示等所有你能想象的功能.

5. initialPreviewAsData 項, 如果設定為 false, 將不會展示圖片,而只會顯示圖片連結, 如果設定為 true, 則展示圖片.

6. overwriteInitial 項, 是設定是否覆蓋原有的已上傳項.

7. maxFileSize 項, 上傳檔案的最大大小.

8. initialCaption 項, 初始化 input 選擇框內的內容.

檢視函式

app/advanced/views.py 內容如下:

@advanced.route('/delete', methods=['GET', 'POST'])def delete():
    key = request.form.get('key')    print key    return jsonify()@advanced.route('/example_1', methods=['GET', 'POST'])def example_1():

    return render_template('exam_1.html')

知識點

1. 第一個 url 函式是實現了檔案的刪除功能. 其中的 request.form.get('key') 就是為了獲取 ajax 提交的 form data 的值, 也就是示意圖中右下角所展示的內容.

2. 第二個 url 函式實現了上傳功能的頁面.

進階示例 2

該示例僅僅是把 js 中的 overwriteInitial 項設定成了 true, 選擇新檔案的時候, 將會覆蓋原有的檔案.

進階示例 3

模板內容

app/advanced/templates/exam_3.html 內容如下:

{% extends 'advanced_common/base.html' %}
{% block content %}
進階示例3
Select File

知識點

1. browseClass 項, 用來設定上傳按鈕的樣式.

2. showCaption 項, 用來設定是否顯示檔案選擇 input 框.

3. showRemove 項, 用來設定是否顯示刪除按鈕.

4. showUpload 項, 用來設定是否顯示上傳按鈕.

5. 該示例僅僅顯示選擇檔案按鈕, 僅此而已.

檢視函式

views.py 檢視函式和示例1基本相同,不在贅述.

進階示例 4

模板內容

app/advanced/templates/exam_4.html 內容如下:

{% extends 'advanced_common/base.html' %}
{% block content %}
進階示例4
Select File

知識點

1. accept="image/*", input 標籤中的屬性, 表示只能選擇圖片檔案.

2. previewFileType: image 設定要選擇的檔案格式是圖片格式.

3. 其它的都是為了設定各個按鈕的樣式, 可以自由組合.

檢視函式

views.py 檢視函式和示例1基本相同,不在贅述.

進階示例 5

模板內容

app/advanced/templates/exam_5.html 內容如下:

{% extends 'advanced_common/base.html' %}
{% block content %}
進階示例5
Select File

知識點

1. previewFileType: "text" 設定要選擇的檔案格式是檔案格式.

2. allowedFileExtensions 設定能夠接受上傳的集中檔案的格式, 具有驗證功能.

3. previewClass 預覽框的背景樣式.

檢視函式

views.py 檢視函式和示例1基本相同,不在贅述.

進階示例 6

模板內容

app/advanced/templates/exam_6.html 內容如下:

{% extends 'advanced_common/base.html' %}
{% block content %}
進階示例6
Select File