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

关于模态框

使用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>

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

OK,今天的内容就到这里，如果觉得内容对你有所帮助，可以点击文章右下角的“在看”。公众号内部回复“服务”，即可获得代码下载链接....

欢迎将文章或我的微信公众号【清风Python】分享给更多喜欢python的人，谢谢。

作者：清风Python