Use el matraz para realizar la visualización de imágenes, la operación de cambio de página, la clasificación y la carga

Este experimento usa un matraz para hacer una interfaz de carga de clasificación de imágenes y primero presenta el método de uso.

1. Introducción

la pagina es la siguiente

1. Primero abra el archivo 'index.html' y agregue una categoría de clasificación en la etiqueta de selección. Nota: El valor del valor debe ser el mismo que el texto de la etiqueta.

 

Pegue todas las imágenes que deben clasificarse en la carpeta de imágenes.

 

 Ejecute el archivo 'classify.py'.

Haga clic en el enlace de abajo

Aparece la siguiente interfaz, ingrese la primera imagen después de la barra de direcciones, si necesita ubicar la quinta imagen

Haga clic en el anterior para cambiar de imagen.

 

Haga clic en el botón de carga para cargar a la carpeta correspondiente.

 Aviso para cargar con éxito

En este punto se ha creado la carpeta y se ha subido la imagen.

Si la imagen modificada ya se cargó en esta carpeta, se le indicará que la carga falló.

 Además, puede cambiar de imagen haciendo clic en la anterior y la siguiente, o puede ingresar directamente el número de imágenes en la barra de direcciones.

Dos, clasificar.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. índice.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 %}

Cinco, index_re.html

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

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

Supongo que te gusta

Origin blog.csdn.net/m0_51864191/article/details/128139386
Recomendado
Clasificación