Drawer Tornado Combat (4)--post and upload pictures

For links, click to get the title, the essence of sending Ajax requests, and then go to the link crawl information, publish and send Ajax request publishing information, but also to have the publisher's information, and in the information table need to record the publisher's user name, the publisher's Avatar, the publisher's ID, This information can be obtained through the session (provided the session is set to set this information)

For the text, there's nothing to say, just a release to send AJAX requests

For pictures, choose pictures and upload pictures to do together, that is, the selection of pictures, pictures uploaded to the background, and the page to show the effect of the picture, in essence, also secretly send requests, and binding is not a common onclick event, but the onchange event, That is, if the input (file) is triggered by the event that the file is a special data, it is not possible to send the request through the Ajax string, so we need to use the form submission method, but this will refresh the page, so we need to use the Form+iframe form to send the request

　First look at the front-end HTML How to write

　　Request through the IFRAME this pipeline to submit the past, and upload successful to show the picture, the problem again, onchange event only listen to input file changes concurrent requests, then how do I know the upload succeeded???

　　---that leads to the onload event of the IFRAME and executes it when the IFRAME uploads the file successfully

        function Uploadimage (THS) {//If the upload succeeds (runs out of this channel) execute the Uploadimagecomplete function document.getElementById (            ' Upload_img_iframe '). onload = Uploadimagecomplete;            Submit Request 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 ();            Get upload successful content {' status ': True, ' path ': File_path} var obj = Json.parse (origin);                if (obj.status) {//Create an IMG tag, display the image directly on the page via the src attribute var img = document.createelement (' img ');                IMG.SRC = Obj.path;                $ ("#upload_img_form"). Append (IMG);                Hide upload Picture Style $ (' #fakeFile '). addclass (' hide ');            Displays the re-upload style $ (' #reUploadImage '). Removeclass (' hide ');        }} function Reuploadimage (ths) {    $ (THS). addclass (' hide ');            $ ("#upload_img_form"). Find (' img '). Remove ();        $ (' #fakeFile '). Removeclass (' hide '); }

The background just gets the file passed in and writes it to the specified path, as long as home.py writes the following code under Controllers

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))

Drawer Tornado Combat (4)--post and upload pictures