python bootstrap 文件上传_flask 项目中使用 bootstrapFileInput(基础篇)

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

创建蓝图 basic

构建基础 html 模板

app/basic/templates/basic_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

模板内容

app/basic/templates/example_1.html 内容如下:{% extends 'basic_common/base.html' %}

{% block content %}

基本示例1 -- 自动展示缩略图

Select File{% endblock %}

{% block title %}

基本示例1 -- 自动展示缩略图

{% endblock %}

知识点:需要引入 form 表单, 并支持文件上传, 需设置 enctype="multipart/form-data".

由于 flask 项目是以 html 标签的 name 属性进行选择元素, 该 input 标签中需要设置 name 属性.

class 需要设置为 'file'.

input 标签的 type 属性要设置为 file, 以便支持文件上传.

input 标签由于没有引入 multiple 属性, 故不能实现选择多文件功能.

视图函数

app/basic/views.py 内容如下:# -*- coding:utf-8 -*-__author__ = '东方鹗'from flask import render_template, request, current_app, redirect, url_forfrom . import basicfrom werkzeug.utils import secure_filenameimport osdef allowed_file(filename):

ALLOWED_EXTENSIONS = set(['txt', 'pdf', 'png', 'jpg', 'jpeg', 'gif'])    return '.' in filename and \

filename.rsplit('.',