image previews

master
michael 2022-10-12 11:40:52 -07:00
parent a8779de705
commit f741e2dfaf
1 changed files with 25 additions and 1 deletions

View File

@ -2,7 +2,11 @@
{% block content %} {% block content %}
<form action="/ratio_pyro" method="POST" enctype="multipart/form-data"> <form action="/ratio_pyro" method="POST" enctype="multipart/form-data">
<h2>Simple Ratio Pyrometry Interface</h2> <h2>Simple Ratio Pyrometry Interface</h2>
<input type="file" name="file" accept=".png,.jpg,.jpeg" value="Choose Image"/>
<img src="#" id="img-preview" type="file"/>
<br>
<input id="img-upload" type="file" name="file" accept=".png,.jpg,.jpeg" value="Choose Image"/>
<h4>Camera Settings</h4> <h4>Camera Settings</h4>
@ -35,4 +39,24 @@
<br> <br>
<input type="submit" value="Generate Heatmap"/> <input type="submit" value="Generate Heatmap"/>
</form> </form>
<script>
let imgPreview = document.getElementById('img-preview');
let imgUpload = document.getElementById('img-upload');
imgUpload.onchange = event => {
console.log("hi")
const [file] = imgUpload.files;
if (file) {
console.log(file)
imgPreview.src = URL.createObjectURL(file);
}
};
</script>
<style>
#img-preview {
width: 18rem;
}
</style>
{% endblock %} {% endblock %}