您的位置:首页 > 理论基础 > 计算机网络

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

2019-07-19 09:44 691 查看

关于模态框

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

[code]<!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在,就很简单...

[code]<script>
$('#upload')
.click(function() {
$('#upload').submit();
})
</script>

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

[code]<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去获取:

[code]<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

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐