本實驗使用flask制作一個圖像的分類上傳界面，首先介紹一下使用方法。
一、使用簡介
頁面如下
1、首先打開‘index.html’文件，在select標(biāo)簽中添加分類類別。注意：value值應(yīng)和標(biāo)簽文本一樣。
?
將需要分類的圖片全部粘貼進images文件夾中。
?
?運行‘classify.py’文件。
點擊下方鏈接
出現(xiàn)以下界面
在地址欄后輸入第幾張圖片，如需要定位到第5張圖片
點擊上一張可以切換圖片。
?
點擊上傳按鈕即可上傳到對應(yīng)文件夾。
?提示上傳成功
此時文件夾已創(chuàng)建，且該圖片已上傳。
如果改圖片已上傳至此文件夾，會提示上傳失敗。
文章來源：http://www.zghlxwxcb.cn/news/detail-436210.html
?此外，點擊上一張下一張即可切換圖片，直接在地址欄輸入第幾張圖片也可以。文章來源地址http://www.zghlxwxcb.cn/news/detail-436210.html
二、classify.py
import os
import shutil
from flask import Flask, render_template, request
import settings
app = Flask(__name__)
app.config.from_object(settings)
id = 0
@app.route('/<int:id>', methods=['POST', 'GET'])
def index(id):
root_dir = os.path.abspath(os.path.dirname(__file__))
img_path = root_dir + '/static' + '/images' # 圖片文件存儲在static文件夾下的images文件夾內(nèi)
files = os.listdir(img_path) # 獲取圖片文件名字
# print(root_dir)
# print(img_path)
# print(type(files[0])) # 輸出一個列表，1.jpg,2.jpg
# print(files[id])
i = len(files)
if id == len(files) + 1:
id = 1
file = "/static/images/" + files[id - 1]
print(file)
filename = files[id - 1]
print(filename)
if request.method == 'POST':
basepath = os.path.dirname(__file__) # 當(dāng)前文件所在路徑
f = os.path.join(basepath, 'static/images', files[id - 1]) # 獲取原圖片路徑
val = request.form.get('sel') # 獲取圖片將要分類到的文件夾名稱
print(val)
sub_path = os.path.join(basepath, 'static/', val) # 獲取該圖片將要分類到的文件夾路徑
if os.path.exists(sub_path) is False:
os.makedirs(sub_path)
sub_files = os.listdir(sub_path)
# 如果圖片已經(jīng)存在在該文件夾下，提示上傳失敗
for sub_file in sub_files:
if files[id-1] == sub_file:
return render_template('index_re.html', file=file, id=id, i=i, filename=filename, val=val)
upload_path = os.path.join(basepath, 'static/', val+'/', files[id - 1])
print(upload_path)
# 復(fù)制圖片
shutil.copy(f, upload_path)
return render_template('index_ok.html', file=file, id=id, i=i, filename=filename, val=val)
return render_template('index.html', file=file, id=id, i=i, filename=filename)
if __name__ == '__main__':
app.run()
三、index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>上傳</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}" />
</head>
<body>
<h1>圖像分類</h1>
<p>當(dāng)前是第{{ id }}張圖片，圖片名為{{ filename }}</p>
<img src="{{ file }}" width="400" height="400" alt="你的圖片被外星人劫持了～～"/>
<div class="select_beforePage_button">
{% if id !=1 %}
<a href="{{ url_for('index', id=id - 1) }}"><span aria-hidden="true">←</span> 上一張</a>
{% endif %}
</div>
<div class="select_nextPage_button">
{% if id !=i %}
<a href="{{ url_for('index', id=id + 1) }}" style="">下一張<span aria-hidden="true">→</span></a>
{% endif %}
</div>
<br>
<form action="" enctype='multipart/form-data' method="POST">
<br>
選擇圖片類別
<select id="sel" name="sel" style="width: 150px;">
<option value="花">花</option>
<option value="貓">貓</option>
<option value="風(fēng)景">風(fēng)景</option>
<option value="狗">狗</option>
<option value="車">車</option>
<option value="鳥">鳥</option>
</select>
<input type="submit" value="上傳" class="button" style="margin-top:15px;"/>
<br>
<br>
{% block load %}
{% endblock %}
</form>
</body>
</html>四、index_ok.html
{% extends 'index.html' %}
{% block load %}
<span id="ok">上傳成功！上傳至文件夾："{{ val }}"</span>
{% endblock %}五、index_re.html
{% extends 'index.html' %}
{% block load %}
<span id="ok">上傳失?。≡搱D片已在該文件夾中</span>
{% endblock %}六、style.css
h1 {
color:black;
text-align:center;
}
p {
font-family:"Times New Roman";
font-size:20px;
}
.select_beforePage_button{
position: fixed;/*固定位置*/
}
.select_nextPage_button{
position: fixed;/*固定位置*/
margin-left: 350px;
}
到了這里，關(guān)于使用flask實現(xiàn)圖片的查看、翻頁操作、分類和上傳的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
