使用AJAX和Flask更改图像

debugcn 发表于 Dev

texaspete11

我有一个HTML图像文件，我尝试使用其中的不同图像（尤其是最新图像）进行更新。这是烧瓶代码：

@app.route('/uploads/update_file',  methods=['GET', 'POST'])
def update_file():
    print('update_file')
    list_of_files = glob.glob(staging_dir+'/*.jpg')
    if len(list_of_files) == 0:
        latest_file = ''
    latest_file = max(list_of_files, key=os.path.getctime)
    print('latest '+latest_file)
    splits = latest_file.split('/')
    file = splits[-1]
    return send_from_directory(directory=staging_dir, filename=file)

在Java脚本中，我有：

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script>
       setInterval(ajaxCall,5000);

     function ajaxCall()
      {
          $.ajax({
                    type : 'GET',
                    url : "{{url_for('update_file')}}",
                    async: false,
                    success: function(data) {
                        document.getElementById("img").src = data;
                    },
                 });
      }
</script>

我看到的是update_file（）被调用，但send_from_directory似乎从未返回。我认为是因为update_file仅被调用一次。任何想法有什么问题吗，或者这甚至是解决此问题的首选方法？

阿基布·拉斯特（Akib Rhast）

好的，这是一种快速解决方案，它不使用send_from_directory（），但是可以使用。

我基本上使用的是您帖子中相同的代码。删除了检查最新文件的逻辑（以使此演示保持简单）。

@app.route('/uploads/update_file',  methods=['GET', 'POST'])
def update_file():
    item = ["static/img/"+item for item in os.listdir("static/img")]
    return random.choice(item)

这是我的文件夹结构：