Flask使用bootstrap为HttpServer添加上传文件功能

今天朋友说，之前写的文章Flask开发vip版HttpServer，具备了httpserver的下载功能，比python原生的http服务好用多了，但能否再此基础上添加一个文件上传的功能呢？必须可以啊，正好复习下bootstrap和jQuery的相关知识。
提个小需求

今天朋友说 之前写的文章Flask开发vip版HttpServer 具备了httpserver的下载功能 比python原生的http服务好用多了 但能否再此基础上添加一个文件上传的功能呢 必须可以啊 正好复习下bootstrap和jQuery的相关知识。

关于模态框

使用bootstrap实现点击按钮弹出窗口 简直不要太简单。我们只需要将写好的窗口内容隐藏 然后调用bootstrap的框架即可 简单几行就能完成相关功能实现....

前提条件是 我们需要引入bootstrap.min.js 直接上代码看下准备好的上传文件弹框吧....

 !DOCTYPE html 

 html 

 head 

 meta charset utf-8 

 title Bootstrap 实例 - 模态框 Modal 插件 /title 

 link rel stylesheet href https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css 

 script src https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js /script 

 script src https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js /script 

 /head 

 body 

 h2 创建模态框 Modal /h2 

 !-- 按钮触发模态框 -- 

 button class btn btn-primary btn-lg data-toggle modal data-target #myModal 

 文件上传

 /button 

 !-- 模态框 Modal -- 

 div class modal fade id myModal tabindex -1 role dialog aria-labelledby myModalLabel aria-hidden true 

 div class modal-dialog 

 div class modal-content 

 div class modal-header 

 h4 class modal-title id myModalLabel 

 请选择所需上传的本地文件

 /h4 

 /div 

 div class modal-body 

 form id upload-form enctype multipart/form-data 

 input id file class btn btn-info name upload_file type file 

 /form 

 /div 

 div class modal-footer 

 button id upload class btn btn-primary 上传 /button 

 button type button class btn btn-default data-dismiss modal 关闭 /button 

 /div 

 /div !-- /.modal-content -- 

 /div !-- /.modal -- 

 /div 

 /body 

 /html 

bootstrap模态框.gif

jQuery事件与ajax

正常情况下 我们使用form表单进行上传文件 需要在表单内部添加一个type submit 的按钮 可如何才能像demo示例中的 将上传按钮置于页面的任何位置来控制上传呢 有jQuery在 就很简单...

 script 

$( #upload )

 .click(function() {

 $( #upload ).submit();

 /script 

由于是弹出窗口 我们选择文件后 点击上传 此时如果使用url_for()进行页面跳转 有些不符合使用习惯 那么再加深一点 引入ajax进行异步提交好了 那么全量的点击事件就变为

 script 

$( #upload ).click(function() {

 var upload_path $( #upload_path ).text();

 var formData new FormData($( #upload-form )[0]);

 formData.append( upload_path , upload_path);

 $.post({

 url: /upload ,

 dataType: json ,

 type: POST ,

 data: formData,

 async: true,

 cashe: false,

 contentType: false,

 processData: false,

 success: function(returndata) {

 if (returndata[ code ] 200) {

 var info returndata[ info ]

 alert(info);

 error: function(returndata) {

 alert( 上传失败 )

 /script 

关于js中使用Jinjia2

在js中直接使用jinjia2的模板引擎会报错...比如这样 alert({{Book}}); 那么该怎么处理

bad
将内容写在html中 然后通过js去获取

 p id upload_path style display:none {{path}} /p 

var upload_path $( #upload_path ).text();

good
通过jinjia2的tojson过滤器 可以将变量转为json字符串
var upload_path {{path|tojson|safe}};
最终上传实现

软件整体效果如下

Flask_Httpserver.gif

The End

快速上手python的简单web框架flask python可以做很多事情，虽然它的强项在于进行向量运算和机器学习、深度学习等方面。但是在某些时候，我们仍然需要使用python对外提供web服务。