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
相关文章推荐
- 添加文件上传功能:
- 在Servlet中使用开源fileupload包实现文件上传功能
- Bootstrap-fileinput插件使用教程 支持多文件上传
- 使用Flex实现FTP文件上传功能
- Spring MVC使用commons fileupload实现文件上传功能
- Bootstrap3 框架下 使用 Bootstrap-table 结合 Bootstrap- file input 上传文件 并显示进度条
- 在Servlet中使用开源fileupload包实现文件上传功能
- 使用 jquery 的 上传文件插件 uploadify 3.1 配合 java 来做一个简单的文件上次功能。并且在界面上有radio 的选择内容也要上传
- 使用 jquery 的 上传文件插件 uploadify 3.1 配合 java 来做一个简单的文件上次功能。并且在界面上有radio 的选择内容也要上传
- mint mvc文件上传功能——使用篇
- 在 cocos2d-x 中使用 libcurl 实现上传文件功能(附quick-cocos2d-x封装)
- Ruby使用eventmachine为HTTP服务器添加文件下载功能
- 基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用
- 给kindeditor编辑器添加FLV上传播放功能,其中使用flowplayer,适用于大部分版本
- 使用django表单,使网页添加上传文件,并分析文件。
- [Android开发]Android之使用Http协议实现文件上传功能
- Struts2 Ajax文件上传功能 使用Jquery.form插件
- 在Servlet中使用开源fileupload包实现文件上传功能
- 添加ASP.NET文件上传功能为您的网站
- 在Servlet中使用开源fileupload包实现文件上传功能