我一直在嘗試設計我使用 Flask 創建的表單的樣式，這是我面臨的一個特殊問題。我找不到從圖片欄位中洗掉“未選擇檔案”欄位的方法，也找不到設定上傳按鈕樣式的方法，就像我通常可以使用 CSS 一樣。我也在我的檔案中使用引導程式。
這是表單欄位在懸停時的樣子：
我只想在懸停在影像上時顯示“選擇檔案”按鈕，并且我想將它的樣式設定為引導程式按鈕。有什么辦法可以實作這一目標嗎？
uj5u.com熱心網友回復：
據我所知，你不能設計它。
有些頁面只是隱藏它并使用自己的按鈕和 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()
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/361285.html