一、创建一个普通的文件上传的表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>文件上传示例</h1>
<form action="http://127.0.0.1:9000/user/pic" enctype='multipart/form-data' method='POST' id="pic">
<input type="file" name="file">
<input type="submit" value="上传">
</form>
</body>
</html>
表单的属性说明:
1、action
作用:该属性的值指向要提交到某一个页面,缺少它会不知道提交给谁
可以提交的页面:abc.aspx abc.ashx mvc的控制器方法 webapi接口 以及其他后端处理程序
2、method
作用:该属性的值决定以何种方式提交,缺少它会报404
可以取的值:post get put delete
3、enctype
作用:指定类型 缺少它在后台接收时文件并不会包含进去
可以取的值:multipart/form-data application/x-www-form-urlencoded text/plain 此处必须使用 multipart/form-data才能将文件传到服务端
4、name
input标签中的file里面必须包含name属性,服务器端才能获取得到,一般顾名思义都是用file
5、accept
文件类型筛选:
(1)图片类
image/gif image/jpeg image/png .. 多个类型之间用,隔开 如accept="image/gif, image/jpeg"
(2)文档类
doc application/msword ;css text/css;excel application/vnd.ms-excel;ppt application/vnd.ms-powerpoint;
(3) 多媒体类
mp3 audio/mpeg;mp4 audio/mp4 video/mp4;
6、multiple
文件多选
multiple="multiple"
二、jQuery+ajax上传图片
$(function () {
$('#pic').submit(function (e) {
// 禁⽌浏览器对于表单的默认⾏为
e.preventDefault();
$(this).ajaxSubmit({
url: "/pic2",
type: "post",
dataType: "json",
success: function (data) {
if (data.result == 1) {
alert('⽂件上传成功');
} else {
alert('⽂件上传失败,请稍候重试');
}
}
});
});
});
三、服务器端数据接收
@user_blueprint.route("pic", methods=["GET", "POST"])
@login_authenticate
def user_pic_info():
if request.method == "POST":
file = request.files['file'] # files是fileStorage的对象,其中file就是表单中input中file的name所定义的字符串
# file.read() 也可以读取文件的二进制数据
filename = file.filename
save_path = os.path.join(current_app.config["BASE_DIR"], "uploads", filename)
file.save(save_path)
return "OK"
四、文件下载
from flask import request,jsonify,send_from_directory,abort
import os
def download(filename):
if request.method=="GET":
if os.path.isfile(os.path.join('upload', filename)):
return send_from_directory('upload',filename,as_attachment=True)
注:经过实测,需加参数as_attachment=True,否则对于图片格式、txt格式,会把文件内容直接显示在浏览器