一、流程

　　1、<form>表单提交<input：file>标签指定图片，并将<iframe>标签作为target，

　　2、后台获取上传图片信息，将图片保存在服务器中指定路径下，并将路径返回，

　　3、<iframe>接收后台返回信息，unload完成，执行回调函数，

　　4、回调函数新建<img>标签，并将后台返回的路径设置为img.src，

　　5、图片在html上即可显示，

 

二、相关代码

后台：

import os
import json

#  上传图片
class UploadImageHandler (BaseHandler):
    def post(self, *args, **kwargs):
        '''获取上传图片，保存在指定目录，并将目录信息返回'''
        # 获取上传图片
        file_metas = self.request.files['image']

        # 打开图片,写入目录
        for meta in file_metas:
            # 获取文件标题
            file_name = meta['filename']
            # 获取文件类型
            file_type = meta['content_type'].split('/')[-1]
            # 创建文件保存名称
            file_up_name = generate_md5(file_name)+'.'+file_type
            # 创建文件保存路径
            file_path = os.path.join('static','pic','upload',file_up_name)
            # 保存文件
            with open(file_path,'wb') as up:
                up.write((meta['body']))

        # 返回目录
        ret = {'status':True,'path':file_path}
        self.write(json.dumps(ret))


def generate_md5(string):
    import hashlib

    # 创建md5对象
    hl = hashlib.md5()

    # md5加密
    hl.update(string.encode(encoding='utf-8'))
    string_md5 =  hl.hexdigest()

    return string_md5

　　前端：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>upload_image</title>
    <link rel="stylesheet" href='{{static_url("css/style_master.css")}}'>
    <script rel="stylesheet" src='{{static_url("js/jquery-1.12.4.min.js")}}'></script>
    <script rel="stylesheet" src='{{static_url("js/test.js")}}'></script>
</head>
<body>
    <div>
        <form id="upload_img_form" name="form" action="/upload_image" method="post" enctype="multipart/form-data">
            <a id="fakeFile" class="fake-file">
                <span>上传图片</span><br>
                <input type="file" name="image" onchange="UploadImage(this)">
            </a>

            <iframe id="upload_img_iframe" name="upload_img_iframe" src="" class="hide"></iframe>
        </form>

        <a href="javascript:void(0)" class="re-upload hide" id="reUploadImage" onclick="ReUploadImage(this)">重新上传</a>
    </div>
</body>
</html>

　　

function UploadImage(ths){
    // 设置：iframe载入成功后执行的回调函数
    document.getElementById('upload_img_iframe').onload = UploadImageComplete;

    // 设置：form表单提交成功后的目标对象
    $('#upload_img_form').attr('target','upload_img_iframe');
    // 提交form表单
    $('#upload_img_form').submit();
}

function UploadImageComplete(){
    // 获取上传成功后返回的信息{'status':True,'path':file_path}
    var origin = $('#upload_img_iframe').contents().find('body').text();
    var obj = JSON.parse(origin);

    // 结果解析
    if(obj.status){
        // form表单内添加新img标签，指向返回的路径
        var img = document.createElement('img');
        img.src = obj.path;
        $('#upload_img_form').append(img);
        // 隐藏上传文件的引导标签
        $('#fakeFile').addClass('hide');
        // 显示重新上传的引导标签
        $('#reUploadImage').removeClass('hide');
    };
}

function ReUploadImage(ths){
    // 删除已上传图片标签
    $('#upload_img_form img').remove();
    // 显示上传文件的引导标签
    $('#fakeFile').removeClass('hide');
    // 隐藏重新上传的引导标签
    $('#reUploadImage').addClass('hide');
}

　　三、注意

　　form表单不能嵌套，同时需要两个form表单的时候需要并行或者使用js分别调用