Flask、jquery实现ajax上传文件

说明

  1. jquery ajax上传图片
  2. flask 接收并保存到本地,并将图片路径返回给前端
  3. 前端接收到url后,显示该图片

注意:需要引入 jquery,而且jquery版本不能太低,最好1.10以上

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上传</title><!-- 导入js脚本 -->
    <script src="/static/scripts/jquery-3.2.1.min.js"></script>
</head>
<body>
<input type="file" id="image">
<input type="button" onclick="update();" value="上传" >
<br>
<img id="img">
<script>
function update(){
    var formData = new FormData();
    formData.append("image",$("#image")[0].files[0]);
    $.ajax({
        url:'upload', /*接口域名地址*/
        type:'post',
        data: formData,
        contentType: false,
        processData: false,
        success:function(res){
            if(res.code == 0){
                $("#img").attr("src",res.path)
            }else{
                alert(res.msg)
            }
        },
        error:function (XMLHttpRequest, textStatus, errorThrown) {
               alert(XMLHttpRequest);
               alert(textStatus);
               alert(errorThrown);
        }
    })
}
</script>
</body>
</html>

python

#-*- coding:utf-8 -*-

# 导入flask的模块库
from flask import Flask
# 导入flask中的常用的对象
from flask import render_template, request



# 创建一个Flask类实例app
app = Flask(__name__)
# 设置当前运行模式为调试模式
app.config['DEBUG'] = True


# 通过装饰器设置函数URLs的访问地址
@app.route('/')
# 定义一个跳转的处理函数
def index():
    # 页面挑战至face_speed.html
    return render_template('upload.html')


@app.route('/upload', methods=['POST'])
def upload():
    # 获取上传文件的信息
    f = request.files.get('image')
    print("f = ",f)
    ret = {}
    if f.filename != '':
        # 将上传的文件保存在该目录下
        path = 'static/upload/'+f.filename
        exist = os.path.exists(path)
        if exist:
            ret["code"] = 2
            ret["msg"] = "警告:存在同名文件,不能上传!"
        else:
            f.save(path)
            ret["code"] = 0
            ret["path"] = path
            ret["msg"] = "上传成功!"
    else:
        ret["code"] = 1
        ret["msg"] = "上传失败!"
    # 返回
    return ret



# 设置一个程序入口(启动入口)
if __name__ == '__main__':
    # 启动app实例应用
    app.run('127.0.0.1',debug=True,port=10001)

原文出处:http://malaoshi.top/show_1IX4ytzNSvSW.html