提个小需求
今天朋友说，之前写的文章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
