zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    Hessian 服务端流程
    JSH面试感悟
    hibernate的update() 更新延迟或者无法更新,导致同个service调用存储过程执行方法不精确
    一个变量名引发的血案
    oracle for loop循环以及游标循环
    My97Datepicker 去掉 “不合法格式或超期范围”自动纠错限制
    获取前后n天的时间
    基于spring aop的操作日志功能
    为TIF、JPG图片添加地理坐标/平面直角坐标
    NGINX 中常规优化
  • 原文地址:https://www.cnblogs.com/2020-zhy-jzoj/p/13165690.html
Copyright © 2011-2022 走看看