1直接form提交给后台处理
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>form-upload</title> 6 </head> 7 <body>
注意form的enctype类型"multipart/form-data"
8 <form action="/form_upload" method="post" enctype="multipart/form-data"> 9 <input type="file" name="file"/> 10 <input type="submit", value="上传"/> 11 </form> 12 </body> 13 </html>
后台post方法统一处理代码如下：
class FormRequest_handle(tornado.web.RequestHandler):
def get(self, *args, **kwargs):
self.render('iframe_upload.html', status='')
def post(self, *args, **kwargs):
print('post')
file_data = self.request.files['file']#读出了的文件是数组里面的是字典形式[{'filename':'xxx','body':'xxxxxxxxxxxxx'}]
for meta in file_data:
filename = meta['filename']
print(filename, file_data)
with open(os.path.join('static', filename), 'wb') as up:
up.write(meta['body'])
self.write('upload success')
settings = {
'template_path':'views',
'static_path':'static',
# 'xsrf_cookies':True,此处测试csrf跨站伪造请求攻击请忽略
}
if __name__ == '__main__':
application = tornado.web.Application([
# (r'/index', Indexhandle),
# (r'/manager', Managerdhandle),
# (r'/csrf', Csrf_handle),
# (r'/xml', XmlHttpRequest_handle),
(r'/iframe',FormRequest_handle),
], **settings)
application.listen(8089)
tornado.ioloop.IOLoop.instance().start()
2.伪ajax(iframe) 此方法发送请求不刷新页面，利用iframe 的局部刷新特性，对浏览器兼容性更好
1 <body> 2 <form id="myform" action="/iframe" method="post" enctype="multipart/form-data"> 3 <input type="file" name="file"/> 4 <input type="button" value="上传" onclick="redirect()"/> 5 <iframe id="myiframe" name="my_iframe"></iframe> 6 </form> 7 <script src="{{static_url('jquery-3.2.1.js')}}"></script> 8 <script> 9 function redirect() { 10 // document.getElementById('myiframe').onload = test;#执行完iframe立即执行test函数 11 $('#myiframe').onload = test; 12 document.getElementById('myform').target = 'my_iframe';//此处等于IDmyframe会有不同 13 document.getElementById('myform').submit(); 14 // $('#myform').submit(); 15 } 16 function test() { 17 var t = $('#myiframe').contents().find('body').text(); 18 console.log(t) 19 } 20 </script> 21 </body>