Javascript 从flask python中的静态文件夹上载图像，而无需重新加载html页面_Javascript_Python_Jquery_Ajax_Flask

Javascript 从flask python中的静态文件夹上载图像，而无需重新加载html页面

javascript python jquery ajax flask

Javascript 从flask python中的静态文件夹上载图像，而无需重新加载html页面,javascript,python,jquery,ajax,flask,Javascript,Python,Jquery,Ajax,Flask,我想制作一个flask应用程序，从本地计算机中选择一个图像，然后将其存储在静态文件夹中，然后在同一html页面上显示该图像，而无需再次加载该页面。我如何才能做到这一点这是app.py文件 from flask import Flask, request, render_template, send_from_directory,session import os from os import listdir from os.path import isfile, join import r

我想制作一个flask应用程序，从本地计算机中选择一个图像，然后将其存储在静态文件夹中，然后在同一html页面上显示该图像，而无需再次加载该页面。我如何才能做到这一点

这是app.py文件

from flask import Flask, request, render_template, send_from_directory,session
import os
from os import listdir
from os.path import isfile, join


import random
import pandas as pd
import numpy as np
from skimage.io import imread, imshow, concatenate_images
from skimage.transform import resize
from skimage.morphology import label
from keras.models import Model, load_model
from keras.preprocessing.image import ImageDataGenerator, array_to_img, img_to_array, load_img




__author__ = 'ibininja'

app = Flask(__name__)

APP_ROOT = os.path.dirname(os.path.abspath(__file__))

@app.route("/")
def index():
  return render_template("upload.html")

@app.route("/upload",methods=["POST"])
def upload():
  target = os.path.join(APP_ROOT, 'static/')
  print(target)
  print(request.files.getlist("file"))
  for upload in request.files.getlist("file"):
    print(upload)
    print("{} is the file name".format(upload.filename))
    filename = upload.filename
    destination = "/".join([target, filename])
    print("Accept incoming file:", filename)
    print("Save it to:", destination)
    upload.save(destination)
    session['store']=filename
  return render_template("upload.html",image_name=filename)

@app.route("/denoise")
def denoise():
  s=session.get('store')

  return s



if __name__ == "__main__":
  app.secret_key = '123027'
  app.config['memcache'] = 'filesystem'
  app.run(port=4555,debug=True)

这是upload.html文件

<!DOCTYPE html>
<html>
<head>
<title>Upload</title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>

<form id="upload-form" action="{{ url_for('upload') }}" method="POST" enctype="multipart/form-data">

    <strong>Files:</strong><br>
    <input id="file-picker" type="file" name="file" accept="image/*" multiple>
    <div id="msg"></div>
    <input type="submit" value="Upload!" id=".showbtn">

    <img src= "{{url_for('static',filename=image_name)}}" height="250" width="250" 
     alt="show image here" class="img-responsive img-thumbnail"/>

</form>

<div>
  <form action="/denoise" >
    <input type="submit" value="Denoise">
  </form>
</div>


</body>

<script>



    $("#file-picker").change(function(){

        var input = document.getElementById('file-picker');


        for (var i=0; i<input.files.length; i++)
        {
        //koala.jpg, koala.JPG substring(index) lastIndexOf('a') koala.1.jpg
            var ext= input.files[i].name.substring(input.files[i].name.lastIndexOf('.')+1).toLowerCase()

            if ((ext == 'jpg') || (ext == 'png')||(ext == 'jpeg'))
            {
                $("#msg").text("Files are supported")
            }
            else
            {
                $("#msg").text("Files are NOT supported")
                document.getElementById("file-picker").value ="";
            }

        }


    } );

</script>
</html>

我想要这样的输出

基本上是这样的：

var image = document.querySelector('#upload-form img');
image.src = image.src + '?time=' + new Date().getTime();

如果您的图像URL已经有一个查询字符串，则您必须处理该字符串，因此它可能是：

image.src = image.src + '&time=' + new Date().getTime();

我的图像在静态文件夹中，app.py返回图像名称，然后使用{{url_代表'static'，filename=image_name}}这希望在html中加载图像，但不希望重新加载整个页面。您是否尝试了我发布的代码？如果在需要重新加载图像时启动它，它应该可以工作