Come faccio ad evitare il ricaricamento di questa pagina?..
Salve, in pratica una volta che seleziono la foto che voglio modificare e scelgo l'effetto mi ricarica la pagina e quindi mi toglie la selezione della foto che volevo modificare, qualcuno mi sa spiegare come risolvere?..
Codice PHP:
<php>
<section id="photoEffect">
<div class="form-group">
<div class="input-group" align="center">
<h3 style="color:black;">Seleziona una foto</h3>
<br>
<input type="file" accept="image/*" name="imgupload[]" onchange="preview_image(event)">
<br>
</div>
<center>
<img id="originalPhoto" class="img-responsive" width="" height="" align="center"/>
</br>
</div>
<script type='text/javascript'>
function preview_image(event)
{
var reader = new FileReader();
reader.onload = function()
{
var output = document.getElementById('originalPhoto');
output.src = reader.result;
}
reader.readAsDataURL(event.target.files[0]);
}
</script>
<!-- Photo Effects Buttons -->
<nav>
<!-- Filter Effects -->
<section id="filterButtons">
<button id="reset" class="filter">
<div class="filter-tag">Naturale</div>
</button>
<button id="fluorescent" class="filter">
<div class="filter-tag">Flowers</div>
</button>
<button id="nostalgia" class="filter">
<div class="filter-tag">Nostalgia</div>
</button>
<button id="phykos" class="filter">
<div class="filter-tag">Phykos</div>
</button>
<button id="lotus" class="filter">
<div class="filter-tag">Lotus</div>
</button>
<button id="memphis" class="filter">
<div class="filter-tag">Spectacularis</div>
</button>
<button id="deutlich" class="filter">
<div class="filter-tag">Deutlich</div>
</button>
<button id="sumie" class="filter">
<div class="filter-tag">Sumie</div>
</button>
<button id="rockstar" class="filter">
<div class="filter-tag">Rock Star</div>
</button>
<button id="loois" class="filter">
<div class="filter-tag">Loois</div>
</button>
<button id="vignetta" class="filter">
<div class="filter-tag">Vignetta</div>
</button>
</center>
</section>
</nav>
</section>
<script src="<?php echo $baseurl ?>/assets/js/filterous.js"></script>
<script src="<?php echo $baseurl ?>/assets/js/filterousEffects.js"></script>
<br>
<script>
(function() {
var originalPhoto = document.getElementById('originalPhoto');
document.getElementById('filterButtons').addEventListener('click', prepFilterEffect, false);
function prepFilterEffect(e){
var filterButton = getFilterButton(e.target);
if(!filterButton) return;
ApplyEffects[filterButton.id](originalPhoto, 'jpeg');
}
function getFilterButton(target) {
var button;
if(target.classList.contains('filter')) {
button = target;
} else if (target.parentNode.classList.contains('filter')) {
button = target.parentNode;
}
return button;
}
})();
</script>
</php>
