从烧瓶形式中汲取标签

我一直在尝试使用烧瓶创建的表单,这是我面临的特定问题。我无法找到从图片字段中删除“无文件”字段的方法,我找不到样式上载按钮的方法,就像我通常可以使用CSS。我也在我的文件中使用bootstrap。

This is how the form field looks like upon hovering:

This is how my image looks like upon hovering

I在悬停在图像上悬停时,只想只能看到“选择文件”按钮,并且我希望像引导按钮一样样式。有没有办法我可以实现这一点?

as I know you can't style it. As I know other pages may hide this button and display fake button with JavaScript code which clicks hidden Choose File点击伪按钮时。Furas
@ furas是的,我也在考虑这个选项。你能把这个想法扩展到答案吗?Harvez

回答 1

  1. 赞同 1

    As I know you can't style it.

    一些页面只需隐藏它并使用自己的按钮使用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('''
    <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()  
    

    enter image description here


    Furas