Flask使用按钮浏览静态文件夹中的图像

debugcn 发表于 Dev

来宾1

我正在使用Flask在Python中构建一个简单的图像导航器应用程序。我想使用前进和后退按钮浏览静态文件夹中的所有图像。到目前为止，我只有一个按钮可以显示图像而无需刷新页面。如何使用按钮浏览目录？

app.py

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()

该实现的工作原理是，在向实际的下一个图像本身发出另一个请求之前，该按钮将向服务器发出下一个图像或项目是什么的请求。它将搜索相同的目录。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。