Блог

Я пытался придать стиль своей форме, созданной с помощью колбы, и это особая проблема, с которой я сталкиваюсь. Я не могу найти способ удалить поле «Файл не выбран» из поля изображения, и я не могу найти способ стилизовать кнопку загрузки, как я обычно делаю с помощью CSS. Я также использую bootstrap в своем файле.

Вот как выглядит поле формы при наведении курсора:

Я хочу, чтобы при наведении на изображение была видна только кнопка «Выбрать файл», и я хотел бы оформить ее как кнопку начальной загрузки. Есть ли какой-нибудь способ, которым я могу этого достичь?

Как я знаю, ты не умеешь его стилизовать.

Некоторые страницы просто скрывают его и используют собственную кнопку с кодом JavaScript для нажатия на ввод файла.

Когда вы нажимаете эту кнопку, она запускает код JavaScript, который запускается click() дальше file input .

Более сложный код может даже получить имя drag'a'drop файла и отправить это имя file input .

Минимальный рабочий пример:

 from flask import Flask, request, render_template_string  app = Flask(__name__)  @app.route('/', methods=['GET', 'POST']) def index():  if request.method == "POST":  print(request.files['image'])  print(request.files.getlist('image'))   return render_template_string(''' lt;stylegt; input[type="file"] {  display: none; } button {  border: 0;  width: 150px;  height: 150px;  border-radius: 50%; } button[name="select"] {  background-color: lime; } button[name="button"] {  background-color: red; } lt;/stylegt;  lt;form method="POST" enctype="multipart/form-data"gt; lt;input type="file" name="image" id="file_input" style="display:None"/gt;lt;/brgt; lt;button type="button" name="select" value="send" onclick="open_selection();"gt;SELECT IMAGElt;/buttongt; lt;button type="submit" name="button" value="send"gt;SENDlt;/buttongt; lt;/formgt;  lt;scriptgt; var file_input = document.getElementById("file_input");  function open_selection() {  file_input.click(); } lt;/scriptgt; ''')  if __name__ == '__main__':  #app.debug = True   app.run()