说明
- jquery ajax上传图片
- flask 接收并保存到本地,并将图片路径返回给前端
- 前端接收到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)