Y20
以下只介绍上传功能的实现,具体配置不再多介绍。若需要具体实现的文件并运行,可下载文章尾部源代码。
后端代码(.py)
from flask import render_template, url_for, request
from werkzeug.utils import secure_filename
import os,json
#定义函数完成文件上传页面的显示
def show_load_file():
return render_template('upload.html', url = urls('upload_file'), js_path = urls('static',filename='js/jquery.min.js'), img_path = urls('static',filename='img'))
# 定义函数完成文件上传操作
def upload_file():
if request.method == 'POST':
BASE_DIR = os.path.dirname(__file__)
mkdir_file(os.path.join(BASE_DIR, 'file/img/xiao'))
#获取前端传输的文件(对象)
f = request.files.get('file')
# secure_filename:检测中文是否合法
filename = secure_filename(f.filename)
# 验证文件格式(简单设定几个格式)
types = ['jpg','png','gif']
if filename.split('.')[-1] in types:
# 保存图片
f.save(os.path.join(BASE_DIR, 'file/img/xiao/xiao_{0}'.format(filename)))
# 返回给前端结果
return json.dumps({'code':200,'url':url_for('download_file', filename='xiao_{0}'.format(filename), _external=True)})
else:
return json.dumps({'error':'文件格式不合法','code':400})
else:
return json.dumps({'code':405,'error':'请求方式不正确'})
# 定义函数完成图片的读取操作
def download_file(filename):
BASE_DIR = os.path.dirname(__file__)
# 打开文件目录
path = os.path.join(BASE_DIR, 'file/img/{0}/{1}'.format(filename.split('_')[0], filename))
# 如果存在文件,读取,返回图片数据
if os.path.exists(path):
f = open(path, 'rb+')
data = f.read()
f.close()
return data
else:
return '404'
# 定义函数完成文件或文件夹的创建
def mkdir_file(dir_name):
# 如果不存在文件夹,创建文件
if not os.path.exists(dir_name):
os.makedirs(dir_name, 755)
else:
# 如果存在文件夹,遍历文件夹中的图片,重复名字进行替换(若可以
# 存在多张图片,建议用时间戳功能区分,相同名称存取,可能会报错)
for filename in os.listdir(dir_name):
if os.path.isfile(os.path.join(dir_name, filename)):
os.remove(os.path.join(dir_name, filename))
# 定义函数获取指定内容的路径
# "*"之后的会被设定为命名关键字参数,参数名不可变
def urls(fun_name, *, filename=None, external=True):
return url_for(fun_name, filename=filename, _external=external)
前端代码(.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
form {
width: 500px;
border: 1px solid rgba(0,0,0,0.7);
box-shadow: inset 0 0 15px rgba(0,0,0,0.3);
border-radius: 10px;
margin: 100px auto;
}
form>div {
margin: 15px 0;
padding: 0 50px;
}
input[type='text']{
width: 300px;
height: 30px;
}
input[type='radio'] {
margin: 0 10px;
}
input[type='submit'],input[type='button']{
width: 100px;
height: 30px;
border: 1px solid rgba(0,0,0,0.5);
color: white;
background: rgba(0,0,0,0.7);
border-radius: 5px;
}
form>div:last-child{
text-align: right;
}
#photo {
width: 70px;
height: 70px;
border-radius: 50%;
vertical-align: middle;
margin-left: 20px;
}
#file {
display: none;
}
</style>
</head>
<body>
<!--在文件上传时form表单的数据传输方式必须为post,并且编码格式必须为multipart/form-data,否则服务器端是无法获取传输的文件数据-->
<form method="post" enctype="multipart/form-data">
<div>
头像:
<label for="file">
<img src="{{img_path}}/photo.jpg" alt="" id="photo">
</label>
<input type="file" id="file" name="file">
</div>
<div>
昵称: <input type="text" name="nickname">
</div>
<div>
性别: <input type="radio" name="sex" value="男" checked>男
<input type="radio" name="sex" value="女">女
</div>
<div>
年龄: <input type="text" name="age">
</div>
<div>
<input type="submit" value="提交">
</div>
</form>
</body>
<script type="text/javascript" src="{{js_path}}"></script>
<script type="text/javascript">
$('#file').on('change',function () {
// 获取file标签选择器的文件
let file_obj = $('#file').get(0).files[0];
// 将文件对象打包成form表单类型的数据
let formdata = new FormData;
formdata.append('file',file_obj);
// 进行文件数据的上传
$.ajax({
url:'{{url}}',
type:'post',
data:formdata,
processData:false,
contentType:false,
success:function (res) {
//对数据json解析
let data = JSON.parse(res);
if (data.code == 200){
$('img').attr('src',data.url)
}else {
alert(data.error)
}
}
});
});
</script>
</html>
源代码链接(flask2文件夹):https://pan.baidu.com/s/10_vZeB9cB-ZiftsVhie3NQ 提取码:33nq
个人小结,定有不足,欢迎指点。
谢谢~