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


      对于链接,点击获取标题时,本质发送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))
    
  • 相关阅读:
    Windows Phone 7.8 SDK 离线安装包
    利用Async CTP改造Live SDK for WP7
    删除TFS云端上的项目
    Azure通过TFS进行部署
    IIS部署 HTTP Error 500.35 ANCM Multiple InProcess Applications in same Process
    树莓派4B装机指南(无屏幕)
    腾讯云VPS(CVM)重装Debian系统后的基础配置工作
    @Schedule和基于SchedulingConfigurer 定时任务
    (FutureTask和Future) 使用方式 开启线程异步执行并可以阻塞得到返回值
    springboot与logbackspring 非常简单集成
  • 原文地址:https://www.cnblogs.com/xinsiwei18/p/5869583.html
Copyright © 2020-2023  润新知