从 Flask Form 中移除标签

Question

我一直在尝试设计我使用 Flask 创建的表单的样式，这是我面临的一个特殊问题。我找不到从图片字段中删除“未选择文件”字段的方法，也找不到设置上传按钮样式的方法，就像我通常可以使用 CSS 一样。我也在我的文件中使用 bootstrap。

这是悬停时表单域的样子：

我只希望“选择文件”按钮在悬停在图像上时可见，并且我想将其样式设置为 bootstrap 按钮。有什么办法可以实现吗？

Answer 1

据我所知，您无法设置样式。

一些页面简单地隐藏它并使用带有 JavaScript 代码的自己的按钮来点击文件输入。

当您单击此按钮时，它将运行 JavaScript 代码，该代码在 file input 上运行 click()。

更复杂的代码甚至可以使用 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('''
<style>
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;
}
</style>

<form method="POST" enctype="multipart/form-data">
<input type="file" name="image" id="file_input" style="display:None"/></br>
<button type="button" name="select" value="send" onclick="open_selection();">SELECT IMAGE</button>
<button type="submit" name="button" value="send">SEND</button>
</form>

<script>
var file_input = document.getElementById("file_input");

function open_selection() {
    file_input.click();
}
</script>
''')

if __name__ == '__main__':
    #app.debug = True 
    app.run()

从 Flask Form 中移除标签

Remove out label from a Flask Form

html

css

flask