Flask 圖片上傳下載相關代碼片段，多種方法，包括限制文件格式，大小等。
實現圖片文件上傳
# name: 簡單的實現文件上傳任務.
import os
from flask import Flask, request, url_for, send_from_directory
from werkzeug import secure_filename
ALLOWED_EXTENSIONS = set(['png', 'jpg', 'jpeg', 'gif'])
app = Flask(__name__)
app.config['UPLOAD_FOLDER'] = "static/" # 將文件上傳到static目錄
app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024 # 限制只能上傳16M的文件
html = '''
<!DOCTYPE html>
<form method=post enctype=multipart/form-data>
<input type=file name=file>
<input type=submit value=上傳文件>
</form>
'''
def allowed_file(filename):
return '.' in filename and filename.rsplit('.', 1)[1] in ALLOWED_EXTENSIONS
@app.route('/uploads/<filename>')
def uploaded_file(filename):
return send_from_directory(app.config['UPLOAD_FOLDER'],filename)
@app.route('/', methods=['GET', 'POST'])
def upload_file():
if request.method == 'POST':
file = request.files['file']
if file and allowed_file(file.filename):
filename = secure_filename(file.filename)
file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
file_url = url_for('uploaded_file', filename=filename)
return html + '<br><img src=' + file_url + '>'
return html
if __name__ == '__main__':
app.run()
# name: 通過使用flask_uploads插件完成快速上傳
import os
from flask import Flask, request
from flask_uploads import UploadSet, configure_uploads, IMAGES,patch_request_class
app = Flask(__name__)
app.config['UPLOADED_FILE_DEST'] = "static/" # 上傳文件后的存儲位置
patch_request_class(app, 32 * 1024 * 1024) # 限制最大上傳為32M
# UploadSet=允許上傳的格式可配置為 All + TEXT + DOCUMENTS + IMAGES + DATA
photos = UploadSet('file', IMAGES)
configure_uploads(app, photos)
html = '''
<!DOCTYPE html>
<form method=post enctype=multipart/form-data>
<input type=file name=photo>
<input type=submit value=上傳>
</form>
'''
@app.route('/', methods=['GET', 'POST'])
def upload_file():
if request.method == 'POST' and 'photo' in request.files:
filename = photos.save(request.files['photo'])
file_url = photos.url(filename) # 得到文件的路徑
return html + '<br><img src=' + file_url + '>'
return html
if __name__ == '__main__':
app.run()
<!--name: index.html 通過模板生成上傳-->
<!DOCTYPE html>
<form method="POST" enctype="multipart/form-data">
{{ form.hidden_tag() }}
{{ form.photo }}
{% for error in form.photo.errors %}
<span style="color: red;">{{ error }}</span>
{% endfor %}
{{ form.submit }}
</form>
{% if file_url %}
<br><img src="{{ file_url }}">
{% endif %}
# name: app.py 通過使用WTF表單完成上傳.
import os
from flask import Flask, render_template
from flask_uploads import UploadSet, configure_uploads, IMAGES, patch_request_class
from flask_wtf import FlaskForm
from flask_wtf.file import FileField, FileRequired, FileAllowed
from wtforms import SubmitField
app = Flask(__name__)
app.config['SECRET_KEY'] = 'My Name Lyshark'
app.config['UPLOADED_PHOTOS_DEST'] = "static/"
photos = UploadSet('photos', IMAGES)
configure_uploads(app, photos)
patch_request_class(app) # 設置最大上傳大小,默認16M
class UploadForm(FlaskForm):
photo = FileField(validators=[
FileAllowed(photos, u'只能上傳圖片！'),
FileRequired(u'文件未選擇！')])
submit = SubmitField(u'上傳')
# 列出所有文件
#{% for i in filename %}
# {{ i }}
#{% endfor %}
@app.route("/list",methods=['GET'])
def ListFile():
filename = os.listdir(app.config['UPLOADED_PHOTOS_DEST'])
return render_template('login.html', filename=filename)
@app.route('/', methods=['GET', 'POST'])
def upload_file():
form = UploadForm()
if form.validate_on_submit():
filename = photos.save(form.photo.data)
file_url = photos.url(filename)
else:
file_url = None
return render_template('index.html', form=form, file_url=file_url)
if __name__ == '__main__':
app.run()
實現上傳文件並重命名
<!--name: upload.html 上傳文件-->
<script type="text/javascript">
function CheckFileType(filename)
{
var flag = false;
var arry = ["bmp","jpg"];
var index = filename.lastIndexOf(".");
var ext = filename.substr(index+1);
for(var i=0;i<arry.length;i++)
{
if(ext == arry[i])
{
flag=true;
break;
}
}
if(!flag){alert('錯誤,文件名后綴不合法!');}
}
</script>
<body>
<form action="/upload" enctype="multipart/form-data" method="post">
<input type="file" name="file" onchange="CheckFileType(this.value)">
<input type="submit" value="上傳文件">
</form>
<p style="color: green">狀態: {{ file_flage }}</p>
</body>
# name: app.py
from flask import Flask,render_template,request
import os,uuid
app = Flask(__name__)
app.config['MAX_CONTENT_LENGTH'] = 3000000 # 限制文件上傳最大為3MB
@app.route("/upload",methods=['GET','POST'])
def upload_file():
if request.method == "GET":
return render_template("upload.html")
elif request.method == "POST":
file = request.files["file"]
filename = str(file.filename)
if len(filename) >= 20: # 限制文件名的長度必須在20個字符以內
return render_template("upload.html",file_flage="文件名長度超出了限制!")
else:
if filename.find(".") >= 0: # 查找文件中是否包含點這個字符
filetype = file.filename.split(".")[1] # 取出文件類型,后期做判斷
if filetype != None and filetype == "bmp": # 后綴格式必須是bmp結尾
uid = uuid.uuid4() # 生成隨機名稱
save_file_name = str(uid) + "." + filetype # 拼接名稱
file.save(save_file_name) # 保存文件
return render_template("upload.html",file_flage="文件上傳成功 {}".format(save_file_name))
else:
return render_template("upload.html",file_flage="沒有選擇文件,或不是圖片格式,上傳失敗!")
return render_template("upload.html",file_flage="文件上傳失敗,未知錯誤!")
if __name__ == '__main__':
app.run()
實現文件下載功能
<!--name download.html-->
<script type="text/javascript">
function Download(filename)
{
if(filename){window.location.href='/download/?path=' + filename}
}
</script>
<body>
<form action="/download" enctype="multipart/form-data" method="get">
<input type="text" name="down" onchange="Download(this.value)"/>
<input type="submit" value="下載文件" >
</form>
</body>
# name: app.py
from flask import Flask, render_template, request, Response
app = Flask(__name__)
@app.route('/download/', methods=['GET', 'POST'])
def download_file():
if request.method == 'GET':
args = request.args.get("path").replace("/","").replace("\\","")
args = args.replace("<>","").replace("<!--","")
args = "./templates/" + args
print("下載的文件: {}".format(args))
def send_file():
store_path = args
with open(store_path, 'rb') as targetfile:
while 1:
data = targetfile.read(10 * 1024 * 1024) # 每次讀取10M
if not data:
break
yield data
response = Response(send_file(), content_type='application/octet-stream')
response.headers["Content-disposition"] = 'attachment; filename=%s'%args.split("/")[2] # 取出下載的名字
return response
if __name__ == '__main__':
app.run()
ajax前端發送普通數據:
<body>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
function SendAjax(){
$.ajax({
url:"/dataFromAjax",
contentType: "POST",
data:{"head":"hello lyshark"},
success:function(data){
if(data=="1"){
alert("請求已經提交.");
}
},
error:function(){
alert("執行失敗了...")
}
});
}
</script>
<form action="/dataFromAjax" method="post">
<input type="button" value="發送數據" onclick="SendAjax()">
</form>
</body>
from flask import Flask,render_template,request
app = Flask(__name__)
@app.route("/")
def index():
return render_template("index.html")
@app.route("/dataFromAjax",methods=['GET'])
def recv():
data = request.args.get("head")
if(data==""):
return "0"
else:
print("收到客戶{} ".format(data))
return "1"
if __name__ == '__main__':
app.run()
ajax前端發送JSON數據:
<body>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
function SendAjax(){
var username = $('input[name="username"]').val();
var password = $('input[name="password"]').val();
$.ajax({
url:"./dataFromAjax",
type: "POST",
contentType: "application/json;charset=utf-8",
data: JSON.stringify({"username":username,"password":password}),
success:function(result){
alert("執行成功...");
},
error:function(){
alert("執行失敗了...");
}
});
}
</script>
<form action="/dataFromAjax" method="post">
用戶賬號: <input type="text" placeholder="用戶賬號" name="username" /><br><br>
用戶密碼: <input type="text" placeholder="用戶密碼" name="password" /><br><br>
<input type="button" value="發送數據" onclick="SendAjax()">
</form>
</body>
from flask import Flask,render_template,request
from flask import jsonify
import json
app = Flask(__name__)
@app.route("/")
def index():
return render_template("index.html")
@app.route("/dataFromAjax",methods=['POST'])
def recv():
data = request.get_data()
json_data = json.loads(data)
print(json_data)
username = json_data.get("username")
print(username)
return render_template("index.html")
if __name__ == '__main__':
app.run()
ajax前端發送數據並攜帶token
<body>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
function SendAjax(){
var token = $('input[name="token"]').val();
$.ajax({
url:"./dataFromAjax",
type: "POST",
contentType: "application/json;charset=utf-8",
headers:{"Authorization":token}, <!--此處攜帶token-->
success:function(result){
alert("執行成功...");
},
error:function(){
alert("執行失敗了...");
}
});
}
</script>
<form action="/dataFromAjax" method="post">
設置token: <input type="text" placeholder="用戶賬號" name="token" /><br>
<input type="button" value="發送數據" onclick="SendAjax()">
</form>
</body>
from flask import Flask,render_template,request
import json
app = Flask(__name__)
@app.route("/")
def index():
return render_template("index.html")
@app.route("/dataFromAjax",methods=['POST'])
def recv():
token = request.headers.get("Authorization")
print(token)
return render_template("index.html")
if __name__ == '__main__':
app.run()
ajax接收服務器返回數據
<body>
<input type="button" class="MyButton" value="接收數據" onclick="GetAjax()">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
function GetAjax(){
$.ajax({
url:"/dataFromAjax",
contentType: "GET",
success:function(data){
alert("姓名: " + data.name + "年齡: " + data.age);
},
error:function(){
alert("執行失敗了...")
}
});
}
</script>
</body>
from flask import Flask,render_template,request
from flask import jsonify
app = Flask(__name__)
@app.route("/")
def index():
return render_template("index.html")
@app.route("/dataFromAjax",methods=["GET","POST"])
def set():
info = dict()
info['name'] = "lyshark"
info['age'] = 22
return jsonify(info)
if __name__ == '__main__':
app.run()