抽屜之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))

 

抽屜之Tornado實戰（4）--發帖及上傳圖片