抽屉之Tornado实战(4)--发帖及上传图片

对于链接,点击获取标题时,本质发送ajax请求,然后去链接抓取信息,发布又是发送ajax请求

  发布信息,还要有发布者的信息,并在信息表需要记录发布者的用户名,发布者的头像,发布者的id,而这些信息可以通过session获得(前提是设置session要设置了这些信息)

抽屉之Tornado实战(4)--发帖及上传图片

对于文字,没什么好说的,就一个发布时需要发送ajax请求

抽屉之Tornado实战(4)--发帖及上传图片

对于图片,选择图片和上传图片一起做,即选择完图片,图片就上传到后台,并且在页面上展示图片效果,本质上也是偷偷发请求,而且绑定不是常见的onclick事件,而是onchange事件,即input(文件)一旦发生改变就触发的事件

  由于文件是特殊的数据,不可能通过ajax发字符串的形式发送请求了,所以我们要用到form提交的方式,但是这样又会刷新页面,所以要用到form+iframe形式来发送请求

抽屉之Tornado实战(4)--发帖及上传图片

首先看看前端html怎么写

抽屉之Tornado实战(4)--发帖及上传图片

 请求通过iframe这个管道提交过去,并且上传成功要把图片显示出来,问题又来了,onchange事件只是监听input文件变化并发请求,那我怎么知道上传成功了???

  ---那就引出iframe的onload事件,当iframe上传文件成功时,执行它

  图片在页面上的展示效果,通过img标签src属性,所以在文件上传成功还是创建一个img标签

function UploadImage(ths){
//如果上传成功(用完这个通道)就执行UploadImageComplete函数
document.getElementById('upload_img_iframe').onload = UploadImageComplete;
//提交请求
document.getElementById('upload_img_form').target = 'upload_img_iframe';
document.getElementById('upload_img_form').submit();
} function UploadImageComplete(){
var origin = $("#upload_img_iframe").contents().find("body").text();
//获取上传成功的内容 {'status': True, 'path': file_path}
var obj = JSON.parse(origin);
if(obj.status){
//创建img标签,通过src属性直接把图片展示在页面上
var img = document.createElement('img');
img.src = obj.path;
$("#upload_img_form").append(img);
//隐藏上传图片样式
$('#fakeFile').addClass('hide');
//显示重新上传样式
$('#reUploadImage').removeClass('hide');
}
} function ReUploadImage(ths){
$(ths).addClass('hide');
$("#upload_img_form").find('img').remove();
$('#fakeFile').removeClass('hide');
}

后台只要获取传过来的文件,并把它写入指定的路径下,只要在controllers下home.py写入下面代码

class UploadImageHandler(BaseRequestHandler):

    def post(self, *args, **kwargs):
file_metas = self.request.files["image"]
# print(file_metas)
for meta in file_metas:
file_name = meta['filename']
file_path = os.path.join('statics','upload', generate_md5(file_name))
with open(file_path, 'wb') as up:
up.write(meta['body']) ret = {'status': True, 'path': file_path}
self.write(json.dumps(ret))
上一篇:Reverse Nodes in k-Group 解答


下一篇:[BZOJ2339][HNOI2011]卡农