tornado结合前端进行文件上传

时间 2020-06-13

原文原文链接

在表单中咱们获取用户提交的数据，使用的是get_argument，复选框使用的是get_arguments，可是文件的不同，文件的使用request.files。html

form文件上传

html代码：python

<!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>

注意：jquery

form文件上传，必定要在form表单上设置enctype的参数。enctype="multipart/form-data"。否则上传没法成功。web

python代码：ajax

#!/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()

说明：浏览器

一、代码中self.request封装了全部发送过来请求的内容。app

二、self.request.files：能够获取上传文件的全部信息。此方法获取的是一个生成器，内部是由yield实现的，所以咱们在利用此方法返回的对象的时候，不能经过下标获取里面的对象，只能经过迭代的方法。ide

三、迭代出来的对象的filename：就表示上传文件的文件名。tornado

四、迭代出来的对象的body：表示上传文件的内容。获取的文件内容是字节形式的。oop

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进行文件上传。

关键点：

一、获取文件对象，经过files[0]，获取当前上传的文件对象。

二、经过FormData()，实例化一个对象form对象。

三、而后将要传递的参数，文件以键和值以逗号分隔的形式append到form对象中去。

四、而后将整个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>

说明：

一、和原生的同样，都是显得获取当前上传文件的对象。files[0]；而后实例化form对象，将要传递的内容append到实例化的对象form中。

二、后台代码同前，注意字段名对应。

关键点：

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>

关键点：

一、document.getElementById('my_form').target = 'my_iframe'：这段代码就是获取iframe标签。

target就是目标，只要给form设置了target的话，form提交的时候，就会提交到这个target指定的目标上。因此上面的代码表示只要form提交，就会提交到iframe上去。

二、当iframe操做完后会执行Testt方法，Testt方法就是获取后台返回的信息，并打印。