python bootstrap-fileinput示例_flask 项目中使用 bootstrapFileInput(进阶篇)

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

创建蓝图 advanced

构建基础 html 模板

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

{% block css %}            

{% endblock %}

{% block js %}            

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

设置最大的文件上传大小为 100K . 展示服务器上的图片内容,实现 finder 功能. 设置 overwriteInitial 为 false, 新选择的文件不会覆盖原有文件.

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

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

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

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