tornado—form表单上传图片

一、流程

　　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分别调用

发表于 2018-06-05 11:05 笨笨是个名字阅读(256) 评论(0) 编辑收藏举报