在表单中我们获取用户提交的数据，使用的是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结合前端进行文件上传的更多相关文章

  1. FormData使用方法详解，以及在IE9环境下，前端的文件上传问题

    FormData的主要用途有两个: 1.将form表单元素的name与value进行组合,实现表单数据的序列化,从而减少表单元素的拼接,提高工作效率. 2.异步上传文件 一.创建formData对象 ...

  2. 前端异步文件上传组件 Uploader

    Uploader是非常强大的异步文件上传组件,支持ajax.iframe.flash三套方案,实现浏览器的全兼容,调用非常简单,内置多套主题支持 和常用插件,比如验证.图片预览.进度条等,广泛应用于淘 ...

  3. web前端之文件上传

    前言 最近太忙一直没时间认真的写博客(哈哈哈),最近pm提一个需求,移动端需要一个上传图片的功能,允许多选.删除.预览.点击查看大图并可以滑动.虽然听起来很多,但是这个功能在web上实现过啊,使用we ...

  4. 一个tornado框架下的文件上传案例

    html部分----使用了form表单,注意三要素 method="post"  action="/loaddata" enctype="multip ...

  5. 前端/C# 前后台交互文件上传、下载

    试了很多方式,最终确认这个全面简单版的.废话不多说,贴码. 文件上传 input的type命名为file,即可实现文件上传.嗯~~~现在html还是很强大的.Good! 前端 单个文件上传 Html: ...

  6. javascript插件uploadify简单实现文件上传

    最近在学习mvc,需要用到文件上传的功能,找了很多的jquery插件,最后决定使用uploadify这个插件,参照了各位大神的博客,终于勉勉强强会用了.在此,做一下笔记,方便以后忘了查看. 首先在官网 ...

  7. 完整的多文件上传实例(java版)

    昨天刚刚做了一个文件列表上传,后端很简单,用 MultipartFile[] files 获取文件流数组,后端就当IO流操作就可以,似乎好像没啥好写的,但是!!!!!前端是真的糙单.要是自己写一个前端 ...

  8. node中间层实现文件上传

    一般情况下,前端的文件上传一般都是通过form表单的(<input type="file" />)来完成文件的上传,如果使用node中间层完成跨域,文件的上传就需要在n ...

  9. web文件上传下载组件

    最近遇见一个需要上传百兆大文件的需求,调研了七牛和腾讯云的切片分段上传功能,因此在此整理前端大文件上传相关功能的实现. 在某些业务中,大文件上传是一个比较重要的交互场景,如上传入库比较大的Excel表 ...

随机推荐

  1. 2 Struts2的执行流程&配置文件的加载顺序

    执行流程: 访问前段页面,通过url访问action 访问xml中Struts2核心过滤器,并执行一组拦截器(这组拦截器在struts-default.xml中,实现了部分功能) 通过action配置 ...

  2. 用Jackson进行Json序列化时的常用注解

    Jackson时spring boot默认使用的json格式化的包,它的几个常用注解: @JsonIgnore 用在属性上面,在序列化和反序列化时都自动忽略掉该属性 @JsonProperty(&qu ...

  3. F: Horse Pro 马走棋盘 BFS

    F: Horse Pro 豆豆也已经开始学着玩象棋了,现在豆豆已经搞清楚马的走法了,但是豆豆不能确定能否在 100 步以内从一个点到达另一个点(假设棋盘无限大). Input 第一行输入两个整数 x1 ...

  4. request和response对象如何解决中文乱码问题？

    出现中文乱码的问题,一般的原因编码和和解码不一致造成的. /* 乱码:编码和解码不一致导致的 GET:你好 POST:?????? tomcat版本:8.5及以上版本 GET请求方式,request对 ...

  5. Spring_MVC 21问

    1.什么是Spring MVC ?简单介绍下你对springMVC的理解? Spring MVC是一个基于Java的实现了MVC设计模式的请求驱动类型的轻量级Web框架,通过把Model,View,C ...

  6. ‘A’ = N’A’ , will not kill index seek in sqlserver version above 2014 anymore

    Thanks to The advisor show us that we can get different behavior when we use condition , ='20000' or ...

  7. LauUI 的学习

    LayUI学习笔记 layer laydate layui 学习新技术方法:学习一个新技术,要去把它的文档通读一遍,不管你能不能读明白,就算你不明白也大概能知道它是怎么回事了,一回生二回熟,多读几遍, ...

  8. redhat 7.6 密码破解（无光盘）

    开机,在下面界面按e 找到linux16  在最尾输入 rd.break 按 Ctrl+x 输入 mount -o remount,rw /sysroot 输入chroot   /sysroot sh ...

  9. 设计模式课程 设计模式精讲 7-2 建造者模式Coding

    1 代码演练 1.1 建造者模式演练 1.2 静态内部类演练建造者模式(链式调用) 1 代码演练 1.1 建造者模式演练 需求: 根据讲师提供的课程名称,课程ppt,课程视频,课程手记,课程问答 制作 ...

  10. 获取美拍视频的链接--JS分析

    美拍链接:https://www.meipai.com/ 找到视频链接的标签,源代码中没有这个div 通过Fiddler抓包,找到class="mp-h5-player-layer-vide ...