запрос: Я создал flask веб-инструмент, который создает файл на основе пользовательского ввода. Я хотел бы, чтобы кнопка «1022» * «загрузка» отображалась во время создания файла и после его создания, чтобы кнопка «превратилась» в кнопку загрузки.
рабочий процесс: Пользователь загружает изображение, затем вызывается скрипт, который создает файл вывода («output.txt») на удаленном сервере. Создание этого файла занимает несколько минут. После загрузки пользователь сразу направляется на новую страницу, где он может загрузить выходной файл («output.txt») с помощью кнопки. В настоящее время отображается только простая кнопка загрузки.
Я пытался реализовать с помощью JavaScript, но не смог.
Bootstrap кнопка, которую я хотел бы использовать:
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
Loading...
</button>
скелет init .py:
from flask import Flask, send_from_directory, render_template, request
import subprocess
# app configuration
app = Flask(__name__)
app.config['DOWNLOAD_FOLDER'] = "path/to/upload"
#@app.route('/test', methods=['GET', 'POST'])
#def upload_file():
# if request.method == 'POST':
#omitted code to upload input file
#subprocess.call(['static/script.sh', "input.txt"])
# return redirect(url_for('downloaded_file'))
# return render_template("index.html", template_folder="./templates")
@app.route('/', methods=['GET', 'POST'])
def downloaded_file():
if request.method == 'POST':
return send_from_directory(app.config['DOWNLOAD_FOLDER'], "output.txt", as_attachment=True)
return render_template("test.html", template_folder="./templates")
Скелет шаблона, содержащий текущую кнопку загрузки:
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link type="text/css" href="/static/jquery-ui-1.8.10.custom.css" rel="Stylesheet" />
</head>
<body>
<form method=post enctype=multipart/form-data id=download>
<button type=submit class="btn btn-secondary">Download</button>
</form>
<script src="/static/jquery-1.6.4.min.js"></script>
<script src="/static/jquery-ui-1.8.10.custom.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>