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>
    <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,
        dataType:'json',//服务器返回数据的类型
        success:function(res){
            if(res.code == 0){
                $("#img").attr("src",res.path)
            }else{
                alert(res.msg)
            }
        },
        error:function (xhr, textStatus) {
            alert('发生错误');
            console.log(xhr.responseJSON) // json格式，ajax请求使用该对象
        }
    })
}
</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