I would greatly appreciate your help. I have tried everything and can not make it work as expected. I have a code and would like to add image compression in it, ie I want to reduce the weight of the image before uploud. Following:
<div class="modal-body">
<div class="alert alert-info" role="alert"> 1º Passo: Carregue sua imagem clicando em escolher arquivo. <br> 2° Passo: Após surgir a confirmação clique em ok. <br> 3° Passo: Clique na imagem para adiciona-la na arte escolhida.</div>
<form id="userForm" method="post" commandName="user" enctype="multipart/form-data" data-ajax="false">
<input id="uploadImage" type="file" accept="image/*" name="myPhoto" onchange="PreviewImage();" />
<img crossOrigin="anonymous" id="uploadPreview" class="btn image1" style="width: 150px;" />
</form>
<script type="text/javascript">
function PreviewImage() {
var oFReader = new FileReader();
oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]);
if (typeof FileReader !== "undefined" && (/image/i).test( document.getElementById("uploadImage").files[0].type)) {
if (document.getElementById("uploadImage").files[0].size > <?php echo $upload_max ;?>){
alert("Arquivo muito grande. Por favor, selecione imagens menores que <?php echo $upload_max ;?> ");
} else if (document.getElementById("uploadImage").files[0].size < <?php echo $upload_min ;?>)
{
alert("Arquivo muito pequeno. Para uma melhor qualidade, por favor selecione imagens maiores que <?php echo $upload_min ;?>");
}
else
oFReader.onload = function (oFREvent) {
var dataURL = oFREvent.target.result;
document.getElementById("uploadPreview").src = oFREvent.target.result;
alert( document.getElementById("uploadImage").files[0].type);
$.ajax({
type: "POST",
url: "envia.php",
data: {image: dataURL,tipo:document.getElementById("uploadImage").files[0].type }
}).done(function( respond ) {
// you will get back the temp file name
// or "Unable to save this image."
document.getElementById("uploadPreview").src=respond;
$("#uploadPreview").click();
});
};
} else
{
alert("Tipo de arquivo inválido. Selecione apenas imagens.");
}
};
</script>
</div>