Я хочу создать приложение flask, в котором я выберу изображение на локальном компьютере, сохраню его в папке stati c и затем покажу изображение на той же странице 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)
это загрузка. 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>
Я хочу вывод, как это
до загрузки файла
после загрузки файла