Tenho um formulário onde a foto aparece como preview ao ser selecionada para upload:
Gostaria de que, ao selecionar a foto, fizesse o upload automaticamente. Como eu passaria os valores para a página alterar-foto.php?
O código segue abaixo:
<div class="faq-profile-btn">
<label for="imagem" class="btn btn-primary waves-effect waves-light">Nova Foto</label>
<button type="button" class="btn btn-danger waves-effect waves-light" style="margin-top: -10px" onclick="excluirImagem()">Excluir Foto</button>
</div>
<input type="file" name="FotoPerfil" id="imagem" onchange="previewImagem()">
<div>
<script>
function previewImagem(){
var input = document.getElementById("imagem");
var nome = input.files[0].name;
var extensao = nome.split('.').pop();
if(extensao != 'jpeg' && extensao != 'jpg' && extensao != 'png'){
$('#acessar').modal('show');
}else{
var imagem = document.querySelector('input[name=FotoPerfil]').files[0];
var preview = document.querySelector('img');
var reader = new FileReader();
var data = new FormData();
data.append('FotoPerfil', $('#imagem')[0].files[0]);
$.ajax({
url: 'alterar-foto-perfil.php',
data: data,
processData: false,
contentType: false,
type: 'POST',
success: function(data)
{
alert(data);
}
});
reader.onloadend = function () {
preview.src = reader.result;
}
if(imagem){
reader.readAsDataURL(imagem);
}else{
preview.src = "";
}
}
}
function excluirImagem(){
var preview = document.querySelector('img');
preview.src = "img/foto_usuario.png";
}
</script>
Ao usar o código acima, ele me retorna valor 0.
data.append('FotoPerfil', $('#imagem')[0].prop('files')[0]);