flask 項目中使用 bootstrapFileInput

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 模板

內容如下:

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 設置為 . 而非 ajax 提交方式需要引入 form 表單, 類樣式 class 需設置為 , 本基礎示例都需要引入 form 表單.

進階示例 1

展示

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

模板內容

內容如下:

知識點

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

模板中的 js 代碼有多種寫法, 詳細內容請見: http://plugins.krajee.com/file-input#options

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

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

initialPreviewAsData 項, 如果設置為 false, 將不會展示圖片,而只會顯示圖片鏈接, 如果設置為 true, 則展示圖片.

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

maxFileSize 項, 上傳文件的最大大小.

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

視圖函數

內容如下:

知識點

第一個 url 函數是實現了文件的刪除功能. 其中的 就是為了獲取 ajax 提交的 form data 的值, 也就是示意圖中右下角所展示的內容.

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

進階示例 2

該示例僅僅是把 js 中的 項設置成了 , 選擇新文件的時候, 將會覆蓋原有的文件.

進階示例 3

模板內容

內容如下:

知識點

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

showCaption 項, 用來設置是否顯示文件選擇 input 框.

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

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

該示例僅僅顯示選擇文件按鈕, 僅此而已.

視圖函數

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

進階示例 4

模板內容

內容如下:

知識點

accept=」image/*」, input 標籤中的屬性, 表示只能選擇圖片文件.

previewFileType: image 設置要選擇的文件格式是圖片格式.

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

視圖函數

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

進階示例 5

模板內容

內容如下:

知識點

previewFileType: 「text」 設置要選擇的文件格式是文件格式.

allowedFileExtensions 設置能夠接受上傳的集中文件的格式, 具有驗證功能.

previewClass 預覽框的背景樣式.

視圖函數

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

進階示例 6

模板內容

內容如下:

知識點

視圖函數

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

進階示例 7

模板內容

內容如下:

知識點

$(「#input-40」).fileinput(「disable」).fileinput(「refresh」, ); 其中,第一個 fileinput(「disable」) 的功能是讓文件上傳插件不可用. 第二個 fileinput(「refresh」, ) 的功能是不顯示上傳預覽模板.

如果只調用第一個 fileinput(「disable」), 將只是關閉文件上傳插件, 假如你已經選擇了文件, 已有預覽效果圖, 則不關閉預覽效果圖.

視圖函數

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

進階示例 8

模板內容

內容如下:

知識點

allowedFileTypes: [「image」, 「video」] 插件的驗證功能, 僅僅允許上傳的文件為圖片和視頻. 可以將 「image」, 「video」 換成 「text」 試試.

視圖函數

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

進階示例 9

模板內容

內容如下:

知識點

allowedFileExtensions 插件的驗證功能, 僅僅允許上傳後綴為 「jpg」, 「gif」, 「png」, 「txt」 的文件.

視圖函數

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

進階示例 10

模板內容

內容如下:

知識點

showPreview: false, 不顯示文件的預覽功能.

elErrorContainer: 「#errorBlock」. 設置 id 為 errorBlock 的區域來顯示錯誤提示.

視圖函數

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

進階示例 11

模板內容

內容如下:

知識點

uploadUrl 設置上傳文件的鏈接. 此處請參閱 flask 項目中使用 bootstrapFileInput(基礎篇) 中的視圖函數內容.

maxFilePreviewSize: 10240 驗證功能, 設置預覽的文件的大小最大為 10M.

視圖函數

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

本章源代碼下載:

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！