71 lines
2.7 KiB
HTML
71 lines
2.7 KiB
HTML
{% extends 'base.html' %}
|
|
{%load static%}
|
|
{%block extracss%}
|
|
<link rel="stylesheet" href="{%static 'DetectionApp/css/upload.css' %}">
|
|
{%endblock extracss%}
|
|
{%block content%}
|
|
<form method="POST" enctype="multipart/form-data">
|
|
{% csrf_token %}
|
|
<div class="side_menu">
|
|
{% if not user.is_authenticated %}
|
|
<p id="description">Please login to submit image</p>
|
|
<button onclick="location.href='{% url 'login' %}'" id='submit' method="GET" type='button'>Login</button>
|
|
{% else %}
|
|
<p id="description">Choose image for analysis</p>
|
|
<input type="submit" id="submit" value="Submit">
|
|
{%endif%}
|
|
</div>
|
|
<div class="upload_field">
|
|
<label for="id_image", class="upload_button" id="image-preview-container">
|
|
{{form.as_p}}
|
|
<img id="image-preview" src="{% static 'DetectionApp/images/upload_img.png' %}" alt="Image Preview" style="width:640px; height:460px;"/>
|
|
</label>
|
|
</div>
|
|
</form>
|
|
<script>
|
|
document.getElementById('id_image').addEventListener('change', function () {
|
|
var input = this;
|
|
var previewContainer = document.getElementById('image-preview-container');
|
|
|
|
|
|
if (input.files && input.files.length > 1) {
|
|
document.getElementById('image-preview').style.display='none'
|
|
for (var i = 0; i < input.files.length; i++) {
|
|
(function (index) {
|
|
var reader = new FileReader();
|
|
|
|
reader.onload = function (e) {
|
|
// Create a new image element for each preview
|
|
var img = document.createElement('img');
|
|
img.src = e.target.result;
|
|
img.id = 'image-preview'
|
|
img.style.display = 'block';
|
|
img.style.width='640px'
|
|
img.style.height='460px'
|
|
img.style.marginRight="5px"
|
|
|
|
// Append the image element to the container
|
|
previewContainer.style.overflowY='hidden'
|
|
previewContainer.style.overflowX='scroll'
|
|
previewContainer.style.width='640px'
|
|
previewContainer.style.height='460px'
|
|
previewContainer.appendChild(img);
|
|
};
|
|
|
|
reader.readAsDataURL(input.files[index]);
|
|
})(i);
|
|
}
|
|
}else{
|
|
var reader = new FileReader();
|
|
|
|
reader.onload = function(e) {
|
|
document.getElementById('image-preview').src = e.target.result;
|
|
document.getElementById('image-preview').style.display = 'block';
|
|
}
|
|
reader.readAsDataURL(input.files[0]);
|
|
|
|
}
|
|
});
|
|
</script>
|
|
</form>
|
|
{%endblock content%} |