Use flask to realize image viewing, page turning operation, classification and upload

This experiment uses flask to make an image classification upload interface, and first introduces the usage method.

1. Introduction

The page is as follows

1. First open the 'index.html' file and add a classification category in the select tag. Note: The value value should be the same as the label text.

 

Paste all the pictures that need to be classified into the images folder.

 

 Run the 'classify.py' file.

Click on the link below

The following interface appears, enter the first picture after the address bar, if you need to locate the fifth picture

Click on the previous one to switch pictures.

 

Click the upload button to upload to the corresponding folder.

 Prompt to upload successfully

At this point the folder has been created and the image has been uploaded.

If the changed picture has already been uploaded to this folder, it will prompt that the upload failed.

 In addition, you can switch pictures by clicking the previous one and the next one, or you can directly enter the number of pictures in the address bar.

Two, 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文件夹内
    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()

3. 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>当前是第{
   
   { 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">&larr;</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">&rarr;</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="风景">风景</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>

4. index_ok.html

{% extends 'index.html' %}
        {% block load %}
            <span id="ok">上传成功!上传至文件夹:"{
   
   { val }}"</span>
        {% endblock %}

Five, index_re.html

{% extends 'index.html' %}
{% block load %}
            <span id="ok">上传失败!该图片已在该文件夹中</span>
{% endblock %}

6. 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;
			}

Guess you like

Origin blog.csdn.net/m0_51864191/article/details/128139386