tornado结合前端进行文件上传
在表单中我们获取用户提交的数据，使用的是get_argument，复选框使用的是get_arguments，但是文件的不一样，文件的使用request.files。
form文件上传
html代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>上传文件</title>
</head>
<body>
<form id="my_form" name="form" action="/index" method="POST" enctype="multipart/form-data" >
<input name="fff" id="my_file" type="file" />
<input type="submit" value="提交" />
</form>
</body>
</html>
注意：
form文件上传，一定要在form表单上设置enctype的参数。enctype="multipart/form-data"。不然上传无法成功。
python代码：
#!/usr/bin/env python
# -*- coding:utf-8 -*- import tornado.ioloop
import tornado.web class MainHandler(tornado.web.RequestHandler):
def get(self): self.render('index.html') def post(self, *args, **kwargs):
file_metas = self.request.files["fff"]
# print(file_metas)
for meta in file_metas:
file_name = meta['filename']
with open(file_name,'wb') as up:
up.write(meta['body']) settings = {
'template_path': 'template',
} application = tornado.web.Application([
(r"/index", MainHandler),
], **settings) if __name__ == "__main__":
application.listen(8000)
tornado.ioloop.IOLoop.instance().start()
说明：
1、代码中self.request封装了所有发送过来请求的内容。
2、self.request.files：可以获取上传文件的所有信息。此方法获取的是一个生成器，内部是由yield实现的，因此我们在利用此方法返回的对象的时候，不能通过下标获取里面的对象，只能通过迭代的方法。
3、迭代出来的对象的filename：就表示上传文件的文件名。
4、迭代出来的对象的body：表示上传文件的内容。获取的文件内容是字节形式的。
ajax上传文件
- 原生ajax
- jquery
原生ajax上传文件
html代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="file" id="img" />
<input type="button" onclick="UploadFile();" />
<script>
function UploadFile(){
var fileObj = document.getElementById("img").files[0]; var form = new FormData();
form.append("k1", "v1");
form.append("fff", fileObj); var xhr = new XMLHttpRequest();
xhr.open("post", '/index', true);
xhr.send(form);
}
</script>
</body>
</html>
说明：
代码中利用原生的ajax进行文件上传。
关键点：
1、获取文件对象，通过files[0]，获取当前上传的文件对象。
2、通过FormData()，实例化一个对象form对象。
3、然后将要传递的参数，文件以键和值以逗号分隔的形式append到form对象中去。
4、然后将整个form对象发送到服务端。
注意：
后台代码和上面的代码一样，不变。注意接收的文件名要同步。
jquery文件上传
html代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="file" id="img" />
<input type="button" onclick="UploadFile();" />
<script>
function UploadFile(){
var fileObj = $("#img")[0].files[0];
var form = new FormData();
form.append("k1", "v1");
form.append("fff", fileObj); $.ajax({
type:'POST',
url: '/index',
data: form,
processData: false, // tell jQuery not to process the data
contentType: false, // tell jQuery not to set contentType
success: function(arg){
console.log(arg);
}
})
}
</script>
</body>
</html>
说明：
1、和原生的一样，都是显得获取当前上传文件的对象。files[0]；然后实例化form对象，将要传递的内容append到实例化的对象form中。
2、后台代码同前，注意字段名对应。
关键点：
processData:false和contentType:false。这2个是关键。
默认的jquery会将我们上传的数据做部分处理。上面两段代码，就是告诉jquery不要处理我们的文件，不然会将我们的文件处理得不完整。
iframe文件上传
原生的ajax和jquery上传的时候，我们都是通过实例化一个form对象来进行文件的上传。但是实例化这个form的对象并不是所有的浏览器都存在，比如低版本的IE就可能没有合格FormData对象，那上面的方法就存在兼容性，没有form对象就不能发送。因此的使用一个兼容性更好的来进行操作，iframe。
html代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form id="my_form" name="form" action="/index" method="POST" enctype="multipart/form-data" >
<div id="main">
<input name="fff" id="my_file" type="file" />
<input type="button" name="action" value="Upload" onclick="redirect()"/>
<iframe id='my_iframe' name='my_iframe' src="" class="hide"></iframe>
</div>
</form> <script>
function redirect(){
document.getElementById('my_iframe').onload = Testt;
document.getElementById('my_form').target = 'my_iframe';
document.getElementById('my_form').submit(); } function Testt(ths){
var t = $("#my_iframe").contents().find("body").text();
console.log(t);
}
</script>
</body>
</html>
关键点：
1、document.getElementById('my_form').target = 'my_iframe'：这段代码就是获取iframe标签。
target就是目标，只要给form设置了target的话，form提交的时候，就会提交到这个target指定的目标上。所以上面的代码表示只要form提交，就会提交到iframe上去。
2、当iframe操作完后会执行Testt方法，Testt方法就是获取后台返回的信息，并打印。
tornado结合前端进行文件上传的更多相关文章
- FormData使用方法详解，以及在IE9环境下，前端的文件上传问题
FormData的主要用途有两个: 1.将form表单元素的name与value进行组合,实现表单数据的序列化,从而减少表单元素的拼接,提高工作效率. 2.异步上传文件 一.创建formData对象 ...
- 前端异步文件上传组件 Uploader
Uploader是非常强大的异步文件上传组件,支持ajax.iframe.flash三套方案,实现浏览器的全兼容,调用非常简单,内置多套主题支持 和常用插件,比如验证.图片预览.进度条等,广泛应用于淘 ...
- web前端之文件上传
前言 最近太忙一直没时间认真的写博客(哈哈哈),最近pm提一个需求,移动端需要一个上传图片的功能,允许多选.删除.预览.点击查看大图并可以滑动.虽然听起来很多,但是这个功能在web上实现过啊,使用we ...
- 一个tornado框架下的文件上传案例
html部分----使用了form表单,注意三要素 method="post" action="/loaddata" enctype="multip ...
- 前端/C# 前后台交互文件上传、下载
试了很多方式,最终确认这个全面简单版的.废话不多说,贴码. 文件上传 input的type命名为file,即可实现文件上传.嗯~~~现在html还是很强大的.Good! 前端 单个文件上传 Html: ...
- javascript插件uploadify简单实现文件上传
最近在学习mvc,需要用到文件上传的功能,找了很多的jquery插件,最后决定使用uploadify这个插件,参照了各位大神的博客,终于勉勉强强会用了.在此,做一下笔记,方便以后忘了查看. 首先在官网 ...
- 完整的多文件上传实例(java版)
昨天刚刚做了一个文件列表上传,后端很简单,用 MultipartFile[] files 获取文件流数组,后端就当IO流操作就可以,似乎好像没啥好写的,但是!!!!!前端是真的糙单.要是自己写一个前端 ...
- node中间层实现文件上传
一般情况下,前端的文件上传一般都是通过form表单的(<input type="file" />)来完成文件的上传,如果使用node中间层完成跨域,文件的上传就需要在n ...
- web文件上传下载组件
最近遇见一个需要上传百兆大文件的需求,调研了七牛和腾讯云的切片分段上传功能,因此在此整理前端大文件上传相关功能的实现. 在某些业务中,大文件上传是一个比较重要的交互场景,如上传入库比较大的Excel表 ...
随机推荐
- 3_03_MSSQL课程_Ado.Net_登录复习和ExcuteScalar
SQL注入 ->登陆窗体破解 ->配置文件 ->首先在 app.Config文件中添加 节点,如下: <connectionStrings> <add name=& ...
- CVPR 2019 行人检测新思路：
CVPR 2019 行人检测新思路:高级语义特征检测取得精度新突破 原创: CV君 我爱计算机视觉 今天 点击我爱计算机视觉置顶或标星,更快获取CVML新技术 今天跟大家分享一篇昨天新出的CVPR 2 ...
- JS - false 的 六种类型
document.write("--------------");document.write(!false);document.write("------------- ...
- iframe结构的网站按F5刷新子页面的实现方式
有的网站或者后台系统由于页面有公共的部分,比如菜单,会把公共的部分放在一个页面,这里称之为父页面,而把具体的内容放入一个iframe中,之后的请求改变iframe的内容.但是这样会有一个问题,因为浏览 ...
- JavaScript一个简单的图片切换布局
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- PHP+Mysql实现网站顶和踩投票功能实例
PHP+Mysql实现网站顶和踩投票功能实例,通过记录用户IP,判断用户的投票行为是否有效,该实例也可以扩展到投票系统中. 首先我们在页面上放置“顶”和“踩”的按钮,即#dig_up和#dig_dow ...
- C语言笔记 13_排序算法
排序算法 冒泡排序 冒泡排序(英语:Bubble Sort)是一种简单的排序算法.它重复地走访过要排序的数列,一次比较两个元素,如果他们的顺序(如从大到小.首字母从A到Z)错误就把他们交换过来. 过程 ...
- Mybatis(使用)与Spring整合
1.总结 https://pan.baidu.com/s/1kWpz7ZD 密码:tsvr 2.代码 https://pan.baidu.com/s/1mjgAeak 密码:h9j8 3.资料 ...
- ASP.NET MVC Web项目中使用Log4Net记录日志，并按照日志类型分文件存储
1.创建MvcLog4Net项目 2.创建 空的MVC项目 3.项目创建完成的效果 4.选择项目,点击鼠标右键,在弹出菜单中选择“管理解决方案的 NuGet 程序包” 5. 在NuGet浏览界面: 点 ...
- 用于云计算的自我更新、自我修补的Linux版本已发布！
自动化是 IT 行业的增长趋势,其目的是消除重复任务中的手动干扰.Oracle 通过推出 Oracle Autonomous Linux 向自动化世界迈出了又一步,这无疑将使 IoT 和云计算行业受益 ...