flask 項目中使用 bootstrapFileInput(文件夾上傳篇)

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

https://github.com/kartik-v/bootstrap-fileinput注意: 本文是主要是以 http://plugins.krajee.com/file-input/demo 示例為基礎進行講解.

特別提醒

1. 使用文件夾選擇文件上傳, 需要用到 webkitdirectory. 該屬性需要像 chrome 和 IE Edge 這樣的瀏覽器才能支持. 並且必須使用一個按鈕來選擇文件夾, 不能使用拖拽功能.
2. 由於這兩個示例主要是為了體現前端的 UI 設計, 視圖函數的功能和前幾章節沒有二至, 因此不在特殊強調.

創建藍圖 Folder

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

構建基礎 html 模板

app/folder/templates/advanced_common/base.html 的內容同前兩章相同. 不在贅述.

文件夾上傳示例 1

模板內容

app/folder/templates/ex_1.html 內容如下:

{% extends 'folder_common/base.html' %}
{% block content %}
文件夾上傳示例1
<label>Upload File From Folder/<label>

 設置選擇文件夾功能, 但只支持選擇文件夾內的單一文件.
{% endblock %}
{% block title %}
 文件夾上傳示例1
{% endblock %}

知識點

1. input 元素中添加 webkitdirectory 屬性, 以便支持文件夾的選擇方式.
2. browseLabel: ‘選擇文件夾…’ 設置選擇按鈕的名稱.

文件夾上傳示例 2

模板內容

app/folder/templates/ex_2.html 內容如下:

{% extends 'folder_common/base.html' %} 

{% block content %}
文件夾上傳示例2
<label>Upload All Files From Folder/<label>

 設置選擇文件夾功能, 支持選擇文件夾內的所有文件.
{% endblock %}
{% block title %}
 文件夾上傳示例2
{% endblock %}

知識點

1. input 元素中添加 multiple 屬性, 支持多文件選擇.
2. browseLabel 設置選擇按鈕的名稱.
3. previewFileIcon 設置在文件無法識別的情況下, 顯示的預覽文件的圖案樣式.
4. allowedPreviewTypes 設置為 empty, null 或 false, 任何文件的預覽功能將會關閉.
5. previewFileIconSettings 設置不同文件的預覽樣式.
6. previewFileExtSettings 識別不同文件格式.