python bootstrap

python bootstrap"/>

python bootstrap

bootstrap 为 flask 使用人员提供了一个非常优美且有效的前端页面组件,但是完美之处还存在些许缺陷,比如文件的上传功能.而 bootstrap-fileinput 是基于 bootstrap 的控件,非常完美的填补了这个空缺.

创建蓝图 advanced

构建基础 html 模板

app/advanced/templates/advanced_common/base.html 内容如下: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

展示

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

知识点html 模板的名称最好在整个项目中,也就是所有的蓝图中都具有唯一性.

请注意 js 代码中的 deleteUrl 项, 此处有多种写法. 请参阅第二点之后, 选择适合自己的方法.

请大胆的想象, 如果此示例实际上已具有 finder 的影子.你可以实现文件上传, 删除, 更新, 展示等所有你能想象的功能.

initialPreviewAsData 项, 如果设置为 false, 将不会展示图片,而只会显示图片链接, 如果设置为 true, 则展示图片.

overwriteInitial 项, 是设置是否覆盖原有的已上传项.

maxFileSize 项, 上传文件的最大大小.

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')

知识点第一个 url 函数是实现了文件的删除功能. 其中的 request.form.get('key') 就是为了获取 ajax 提交的 form data 的值, 也就是示意图中右下角所展示的内容.

第二个 url 函数实现了上传功能的页面.

进阶示例 2

该示例仅仅是把 js 中的 overwriteInitial 项设置成了 true, 选择新文件的时候, 将会覆盖原有的文件.

进阶示例 3

模板内容

app/advanced/templates/exam_3.html 内容如下:{% extends 'advanced_common/base.html' %}

{% block content %}

进阶示例3

Select File{% endblock %}

{% block title %}

进阶示例3

{% endblock %}

知识点browseClass 项, 用来设置上传按钮的样式.

showCaption 项, 用来设置是否显示文件选择 input 框.

showRemove 项, 用来设置是否显示删除按钮.

showUpload 项, 用来设置是否显示上传按钮.

该示例仅仅显示选择文件按钮, 仅此而已.

视图函数

views.py 视图函数和示例1基本相同,不在赘述.

进阶示例 4

模板内容

app/advanced/templates/exam_4.html 内容如下:{% extends 'advanced_common/base.html' %}

{% block content %}

进阶示例4

Select File{% endblock %}

{% block title %}

进阶示例4

{% endblock %}

知识点accept="image/*", input 标签中的属性, 表示只能选择图片文件.

previewFileType: image 设置要选择的文件格式是图片格式.

其它的都是为了设置各个按钮的样式, 可以自由组合.

视图函数

views.py 视图函数和示例1基本相同,不在赘述.

进阶示例 5

模板内容

app/advanced/templates/exam_5.html 内容如下:{% extends 'advanced_common/base.html' %}

{% block content %}

进阶示例5

Select File{% endblock %}

{% block title %}

进阶示例5

{% endblock %}

知识点previewFileType: "text" 设置要选择的文件格式是文件格式.

allowedFileExtensions 设置能够接受上传的集中文件的格式, 具有验证功能.

previewClass 预览框的背景样式.

视图函数

views.py 视图函数和示例1基本相同,不在赘述.

进阶示例 6

模板内容

app/advanced/templates/exam_6.html 内容如下:{% extends 'advanced_common/base.html' %}

{% block content %}

进阶示例6

Select File \n" +            "   {caption}\n" +            ""

}

});

});{% endblock %}

{% block title %}

进阶示例6

{% endblock %}

知识点showUpload: false. 不显示上传按钮.

layoutTemplates. 用于设置文件上传插件的样式. 详见 的 layoutTemplates 项.

视图函数

views.py 视图函数和示例1基本相同,不在赘述.

进阶示例 7

模板内容

app/advanced/templates/exam_7.html 内容如下:{% extends 'advanced_common/base.html' %}

{% block content %}

进阶示例7

Select FileModify

调用插件方法, 点击 modify 按钮来打开获关闭插件功能.

{% endblock %}

{% block title %}

进阶示例7

{% endblock %}

知识点$("#input-40").fileinput("disable").fileinput("refresh", {showUpload: false}); 其中,第一个 fileinput("disable") 的功能是让文件上传插件不可用. 第二个 fileinput("refresh", {showUpload: false}) 的功能是不显示上传预览模板.

如果只调用第一个 fileinput("disable"), 将只是关闭文件上传插件, 假如你已经选择了文件, 已有预览效果图, 则不关闭预览效果图.

视图函数

views.py 视图函数和示例1基本相同,不在赘述.

进阶示例 8

模板内容

app/advanced/templates/exam_8.html 内容如下:{% extends 'advanced_common/base.html' %}

{% block content %}

进阶示例8

Select File

仅仅允许上传的文件为图片和视频. 最大上传的文件数是 10.

{% endblock %}

{% block title %}

进阶示例8

{% endblock %}

知识点allowedFileTypes: ["image", "video"] 插件的验证功能, 仅仅允许上传的文件为图片和视频. 可以将 "image", "video" 换成 "text" 试试.

视图函数

views.py 视图函数和示例1基本相同,不在赘述.

进阶示例 9

模板内容

app/advanced/templates/exam_9.html 内容如下:Select File

$("#input-42").fileinput({        maxFileCount: 10,        allowedFileExtensions: ["jpg", "gif", "png", "txt"]

});

});

知识点allowedFileExtensions 插件的验证功能, 仅仅允许上传后缀为 "jpg", "gif", "png", "txt" 的文件.

视图函数

views.py 视图函数和示例1基本相同,不在赘述.

进阶示例 10

模板内容

app/advanced/templates/exam_10.html 内容如下:{% extends 'advanced_common/base.html' %}

{% block content %}

进阶示例10

Select File

仅仅允许上传后缀为 "jpg", "gif", "png", "txt" 的文件. 不显示文件预览功能. 且设置错误提示的显示位置.

{% endblock %}

{% block title %}

进阶示例10

{% endblock %}

知识点showPreview: false, 不显示文件的预览功能.

elErrorContainer: "#errorBlock". 设置 id 为 errorBlock 的区域来显示错误提示.

视图函数

views.py 视图函数和示例1基本相同,不在赘述.

进阶示例 11

模板内容

app/advanced/templates/exam_11.html 内容如下:Select File

$("#input-44").fileinput({        uploadUrl: '/file-upload-batch/2',        maxFilePreviewSize: 10240

});

});

知识点uploadUrl 设置上传文件的链接. 此处请参阅 flask 项目中使用 bootstrapFileInput(基础篇) 中的视图函数内容.

maxFilePreviewSize: 10240 验证功能, 设置预览的文件的大小最大为 10M.

视图函数

views.py 视图函数和示例1基本相同,不在赘述.

本章源代码下载:

zip压缩包

tar.gz压缩包

作者：藕丝空间

链接：