我正在使用Flask在Python中构建一个简单的图像导航器应用程序。我想要有向前和向后的按钮来浏览静态文件夹中的所有图像。到目前为止，我只有一个按钮可以在不刷新页面的情况下显示图像。如何使用按钮浏览目录？
应用程序
from flask import Flask, render_template
app = Flask(__name__)
@app.route("/")
def hello():
return render_template('upload.html')
@app.route("/getimage")
def get_img():
return "00621.jpg"
if __name__ == '__main__':
app.run()
upload.html
<!DOCTYPE html>
<html lang="en">
<style>
img {
max-width: 100%;
max-height: 100%;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#retrieve').click(function(){
$.ajax({
url: "{{ url_for ('get_img') }}",
type : 'POST',
contentType: 'application/json;charset=UTF-8',
data : {'data':{{}}}
success: function(response) {
$("#myimg").attr('src', 'static/' + response);
},
error: function(xhr) {
//Do Something to handle error
}
});
});
});
</script>
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Image Annotator</h1>
</div>
<button type='button' id ='retrieve'>Submit</button>
<img src="" id="myimg" />
</div>
</div>
</body>
</html>
我已经重建了您的一些代码来实现答案。请注意，我已经将Jquery转换为JS。
新建HTML页面：
<!DOCTYPE html>
<html lang="en">
<style>
img {
max-width: 100%;
max-height: 100%;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Image Annotator</h1>
</div>
<button type='button' onclick="oclick()" id='retrieve'>Submit</button>
<button onclick="action(2)" type="button">Backward</button><button onclick="action(1)" type="button">Forward</button>
<image src="" id="myimg"></image>
</div>
</div>
<script>
var imgap = 0
function oclick(){
var getInitialImage = new XMLHttpRequest();
getInitialImage.open("GET", "/getimage");
getInitialImage.onreadystatechange = function (){
if (this.readyState == 4 && this.status == 200){
document.getElementById("myimg").setAttribute("src", "/image/" + this.responseText);
}
}
getInitialImage.send();
}
function action(ac){
if (ac == 1){
imgap += 1
var getnextimagedetails = new XMLHttpRequest();
getnextimagedetails.open("GET", "/getimage?num=" + imgap.toString());
getnextimagedetails.onreadystatechange = function (){
if (this.readyState == 4 && this.status == 200){
document.getElementById("myimg").setAttribute("src", "/image/" + this.responseText);
}
}
getnextimagedetails.send();
}
if (ac == 2){
imgap += -1
var getlastimagedetails = new XMLHttpRequest();
getlastimagedetails.open("GET", "/getimage?num=" + imgap.toString());
getlastimagedetails.onreadystatechange = function (){
if (this.readyState == 4 && this.status == 200){
document.getElementById("myimg").setAttribute("src", "/image/" + this.responseText);
}
}
getlastimagedetails.send();
}
}
</script>
</body>
</html>
新烧瓶文件：
from flask import Flask, send_from_directory, request
import os
app = Flask(__name__)
@app.route("/")
def hello():
return send_from_directory('', 'upload.html')
@app.route("/image/<path:path>")
def image(path):
print(path)
if (path.endswith(".jpg") or path.endswith(".png") or path.endswith(".bmp") or path.endswith(".jpeg")):
return send_from_directory("", path)
return "", 500
@app.route("/getimage")
def get_img():
print(request.args.get("num"))
if (request.args.get("num") != None):
dirfiles = os.listdir()
presentedstr = []
for string in dirfiles:
if (string.endswith(".jpg") or string.endswith(".svg") or string.endswith(".bmp") or string.endswith(".jpeg") or string.endswith(".png")):
presentedstr.append(string)
presentedstr.index("00621.jpg")
return presentedstr[presentedstr.index("00621.jpg") + int(request.args.get("num"))]
else:
return "00621.jpg"
if __name__ == '__main__':
app.run()
这个实现的工作原理是，在对实际的下一个图像本身发出另一个请求之前，按钮将向服务器发送一个关于下一个映像或项目的请求。它将搜索相同的目录。