使用flask实现图片的查看、翻页操作、分类和上传

本实验使用flask制作一个图像的分类上传界面，首先介绍一下使用方法。

一、使用简介

页面如下

1、首先打开‘index.html’文件，在select标签中添加分类类别。注意：value值应和标签文本一样。

 

将需要分类的图片全部粘贴进images文件夹中。

 

 运行‘classify.py’文件。

点击下方链接

出现以下界面在地址栏后输入第几张图片，如需要定位到第5张图片

点击上一张可以切换图片。

 

点击上传按钮即可上传到对应文件夹。

 提示上传成功

此时文件夹已创建，且该图片已上传。

如果改图片已上传至此文件夹，会提示上传失败。

 此外，点击上一张下一张即可切换图片，直接在地址栏输入第几张图片也可以。

二、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('/', methods=['POST', 'GET'])
def index(id):
    root_dir = os.path.abspath(os.path.dirname(__file__))
    img_path = root_dir + '/static' + '/images'  # 图片文件存储在static文件夹下的images文件夹内
    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__)  # 当前文件所在路径
        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)
        # 如果图片已经存在在该文件夹下，提示上传失败
        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)

        # 复制图片
        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

    
    
    


    
图像分类
    
当前是第{{ id }}张图片，图片名为{{ filename }}
    
        

        {% if id !=1 %}
            ← 上一张
            {% endif %}
        
        

        {% if id !=i %}
            下一张→
        {% endif %}
        
    

    

        

        选择图片类别
        
            花
            猫
            风景
            狗
            车
            鸟
        
        
        

        

        {% block load %}
        {% endblock %}

    

四、index_ok.html

{% extends 'index.html' %}
        {% block load %}
            上传成功！上传至文件夹："{{ val }}"
        {% endblock %}

五、index_re.html

{% extends 'index.html' %}
{% block load %}
            上传失败！该图片已在该文件夹中
{% 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;
			}