博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
抽屉之Tornado实战(4)--发帖及上传图片
阅读量:6081 次
发布时间:2019-06-20

本文共 2071 字,大约阅读时间需要 6 分钟。

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

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

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

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

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

首先看看前端html怎么写

 请求通过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))

 

 

 

转载于:https://www.cnblogs.com/zcok168/p/9797659.html

你可能感兴趣的文章
poj 3984迷宫问题【广搜】
查看>>
oracle ORA-01840:输入值对于日期格式不够长
查看>>
python基础知识~logger模块
查看>>
SIP入门(二):建立SIPserver
查看>>
Servlet3.0的异步
查看>>
WebService连接postgresql( 失败尝试)
查看>>
从头认识java-13.11 对照数组与泛型容器,观察类型擦除给泛型容器带来什么问题?...
查看>>
Python-MacOSX下SIP引起的pip权限问题解决方案(非取消SIP机制)
查看>>
从MFQ方法到需求分析
查看>>
android.view.WindowManager$BadTokenException: Unable to add window
查看>>
HDU5012:Dice(bfs模板)
查看>>
iphone openssh
查看>>
Linux下MEncoder的编译
查看>>
Javascript中闭包(Closure)的探索(一)-基本概念
查看>>
spark高级排序彻底解秘
查看>>
ylbtech-LanguageSamples-PartialTypes(部分类型)
查看>>
福建省促进大数据发展:变分散式管理为统筹集中式管理
查看>>
开发环境、生产环境、测试环境的基本理解和区别
查看>>
tomcat多应用之间如何共享jar
查看>>
Flex前后台交互,service层调用后台服务的简单封装
查看>>