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

一句题外话

昨天是老妈的生日，可惜周一上班没有办法为她庆生，只能电话问候下。但还是在这里补说一句“生日快乐！”(ps:我妈每天都会看我的公众号，哈哈.....)

提个小需求

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

关于模态框

使用bootstrap实现点击按钮弹出窗口，简直不要太简单。我们只需要将写好的窗口内容隐藏，然后调用bootstrap的框架即可，简单几行就能完成相关功能实现....
前提条件是，我们需要引入bootstrap.min.js，直接上代码看下准备好的上传文件弹框吧....

     
    
    
    
    



创建模态框（Modal）


    文件上传



    

        

            

                

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

                

                    
                
            
            

                上传
                关闭
            
        
    

bootstrap模态框.gif

jQuery事件与ajax

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

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

关于js中使用Jinjia2

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

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

{{path}}
var upload_path = $('#upload_path').text();

• good
  通过jinjia2的tojson过滤器，可以将变量转为json字符串
  var upload_path = {{path|tojson|safe}};

最终上传实现

软件整体效果如下：

Flask_Httpserver.gif

The End

OK,今天的内容就到这里，如果觉得内容对你有所帮助，可以点击文章右下角的“在看”。
欢迎将这篇文章或我的微信公众号【清风Python】分享给更多喜欢python的人，谢谢。